Show/hide DIV content based on class applied and "active" button

Reece
Reece used Ask the Experts™
on
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/.

<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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
just create a class for "all" too
and remove this line :
if (c == "all") c = "";
ReeceICT Consultant

Author

Commented:
This appears to have done the trick!  Thanks mate

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial