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

<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

LVL 8
Reece DoddsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
just create a class for "all" too
and remove this line :
if (c == "all") c = "";
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Reece DoddsAuthor Commented:
This appears to have done the trick!  Thanks mate
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.