Show/hide DIV content based on class applied and "active" button
I'm working on a corporate partner deals HTML block for our intranet and there is dozens of deals (tiles) on the page. I'm using a row of buttons to apply filters for each category, and for one of the filterable categories, I would like to show a new bit of content when the button is clicked and the filter is applied.
For example, if you click on "Strategic Partner", I'd like a DIV (that is otherwise hidden) to show in between the buttons and the tiles that I can use to place a blurb about what a strategic partner is.
Note that some of the strategic partners will appear in other filters as tiles can be tagged for more than one category, but I want the explanation blurb to ONLY appear for the active strategic partner filter. At the moment, I'm just applying the same class to the blurb DIV as what applies to any tiles with the strategic-partner filter type and it kind of does what I want. But I don't want the blurb DIV to be visible for the Show All.
A snippet of where I'm at so far can be found below or the full code is at https://jsfiddle.net/0u4kxafj/13/.
For example, if you click on "Strategic Partner", I'd like a DIV (that is otherwise hidden) to show in between the buttons and the tiles that I can use to place a blurb about what a strategic partner is.
Note that some of the strategic partners will appear in other filters as tiles can be tagged for more than one category, but I want the explanation blurb to ONLY appear for the active strategic partner filter. At the moment, I'm just applying the same class to the blurb DIV as what applies to any tiles with the strategic-partner filter type and it kind of does what I want. But I don't want the blurb DIV to be visible for the Show All.
A snippet of where I'm at so far can be found below or the full code is at https://jsfiddle.net/0u4kxafj/13/.
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* ---------- LIST ---------- */
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: left;
/*justify-content: space-around;*/
}
.flex-container a.cp-link {
text-decoration: none;
}
.flex-item {
background: white;
padding: 5px;
width: 210px;
height: 210px;
margin: 10px 5px 0;
border: 1px solid #63ceca;
color: #1a2732;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: center;
word-wrap: normal;
}
.strategic-partner {
border: 1px solid #f7403a;
}
.filterLI {
display: none; /* Hidden by default */
}
.flex-item .cp-image {
top:0;
height:150px;
}
.flex-item .cp-text {
bottom:0;
height:50px;
}
.flex-item .cp-text .cp-name {
font-weight:bold;
font-size: 11pt;
}
.flex-item .cp-text .cp-description {
font-weight:normal;
font-size: 10pt;
font-style:italic;
color: #999999;
}
.strategic-partner .cp-organiser {
background-color: #f7403a !important;
}
.flex-item .cp-organiser {
overflow: hidden;
width: 220px;
height:0;
transition: .5s ease;
top: -205px;
position: relative;
left: -5px;
right: 0;
background-color: #63ceca;
color: #ffffff;
font-size:8pt;
font-weight: bold;
}
.flex-item:hover .cp-organiser {
top: -205px;
height: 40px;
}
.flex-item .cp-organiser span {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
position: absolute;
width: 100%;
}
/* ---------- BUTTONS ---------- */
.show {
display: block;
}
#myBtnContainer {
padding-bottom: 50px;<br>
}
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #63ceca;
color: #ffffff;
cursor: pointer;
height:60px;
max-width: 150px;
display: inline-flex;
overflow: hidden;
vertical-align: top;
margin-top: 4px;
transition: .5s ease;
}
.btn.strat-part {
background-color: #f7403a;
}
.btn.show-all{
background-color: #dddddd;
color: #1a2732;
font-weight:bold;
}
.btn:hover {
background-color: #dddddd;
color: #1a2732;
}
.btn.active {
background-color: #666666;
color: white;
}
.btn.strat-part.active {
/*color: #f7403a !important;*/
}
</style>
</head>
<body>
<!-- Control buttons -->
<div id="myBtnContainer">
<button class="btn show-all active" onclick="filterSelection('all')"> Show all</button>
<button class="btn strat-part" onclick="filterSelection('strategic-partner')"> Strategic partner</button>
<button class="btn" onclick="filterSelection('communications')"> Communications</button>
<button class="btn" onclick="filterSelection('document-services')"> Document services</button>
<button class="btn" onclick="filterSelection('email')"> Email</button>
<button class="btn" onclick="filterSelection('finance-insurance')"> Finance & insurance</button>
<button class="btn" onclick="filterSelection('general')"> General</button>
<button class="btn" onclick="filterSelection('gifts-entertainment')"> Gifts & entertainment</button>
<button class="btn" onclick="filterSelection('i-t')"> IT</button>
<button class="btn" onclick="filterSelection('legal-research')"> Legal research</button>
<button class="btn" onclick="filterSelection('marketing')"> Marketing</button>
<button class="btn" onclick="filterSelection('personal-services')"> Personal services</button>
<button class="btn" onclick="filterSelection('printing')"> Printing</button>
<button class="btn" onclick="filterSelection('professional-development')"> Professional development</button>
<button class="btn" onclick="filterSelection('software')"> Software</button>
<button class="btn" onclick="filterSelection('staffing')"> Staffing</button>
<button class="btn" onclick="filterSelection('travel')"> Travel</button>
</div>
<div class="filterLI strategic-partner">
<span id="sp-blurb">Strategic partners are those suppliers where partnering with them by all firms substantially benefits the network as a whole. We highly recommend that all firms partner with these suppliers to support the ongoing success of our brand.</span><br>
</div>
<!-- Flexible tiles list -->
<ul class="flex-container">
<a href="https://website.com/docs/DOC-6407" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner software">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/practice-evolve.png?a=1535601867767" />
</div>
<div class="cp-text">
<span class="cp-name">Practice Evolve</span><br />
<span class="cp-description">Document and paractice management</span>
</div>
<div class="cp-organiser">
<span>Partnership Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner software">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Intelledox</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner communications">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Jive</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner communications">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Fuze</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner email">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Microsoft Email</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner email">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Mimecast</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner finance-insurance">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Lawcover </span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner software">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">BigHand</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner staffing">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Exigent</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI strategic-partner legal-research">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">LexisNexis</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI communications">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Telstra</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI document-services">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">FileMan</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
<a href="https://website.com/docs/DOC-" class="cp-link" target="_blank">
<li class="flex-item filterLI document-services">
<div class="cp-image">
<img src="https://website.com/resources/statics/14065/" />
</div>
<div class="cp-text">
<span class="cp-name">Law In Order</span><br />
<span class="cp-description">Description summary</span>
</div>
<div class="cp-organiser">
<span>Partnership organised and maintained by </span>
</div>
</li>
</a>
</ul>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterLI");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER