toggle link text on click without Jquery

Question

I'm trying to toggle css button text between an un-clicked and clicked state without using Jquery. Most examples I've seen define the behavior and copy using a single class but I want to reuse this functionality multiple times on the same page with different link text.

Specifically I'm trying to change the initial unicode character from &#9660 to &#9650 (down arrow to an up arrow) so I could add those with a span class before the link text but could I still toggle on click of the button?

Note: Ineed to use the javascript below to get around the compatibility mode issues in SharePoint.

http://codepen.io/r3dg3cko/pen/vybVpq

 var labels = document.querySelectorAll(".collapse"); // get all labels for(var i = 0; i < labels.length; i++){ var label = labels[i]; (function(div){ label.onclick = function(){ if(div.style.display == "block"){ div.style.display = "none"; }else{ div.style.display = "block"; } }; })(label.parentNode.querySelector("div")); } 

 .collapse{ cursor: pointer; display: block; color: #6490d6; background: #fff; min-width: 180px; border-radius: 10px; padding: 5px 10px; display: inline-block; font-family: calibri; font-weight: bold; color: #6490d6; text-decoration: none; text-shadow:0px 1px 0px #fff; border:1px solid #a6a6a6; margin:0px auto; margin-top: -5px; box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); -webkit-transition:box-shadow 0.5s; } .collapse:hover { background: #ECECEC; text-decoration: none; color: orange; } .collapse + input { display: none; /* hide the checkboxes */ } .collapse + input + div { display: none; } table { border-collapse: separate; width: 100%; border: none; } td { padding-left: 10px; padding-top: 10px; vertical-align: top; } .artifact_top { padding: 10px; border: 1px solid lightgrey; margin: 10px; overflow: auto; } 

 <div style="padding-left: 5%;width:450px;"> <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div> <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span> <br/><br/> <div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label> <input id="_1" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label> <input id="_2" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>N/A</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>N/A</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label> <input id="_3" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label> <input id="_4" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> </div> 

Answer 1

UPDATE

CSS Only - Snippet 2

Ok here's a pure CSS solution, no JS/jQuery. Had to change the first 2 rulesets and then add the last 2.

input {
  display: none;
  /* hide the checkboxes */
}
input + .collapse + div {
  display: none;
}

[type='checkbox'] + label::before {
  content: '▲';
}
[type='checkbox']:checked + label::before {
  content: '▼';
}

I also swapped the positions of the checkbox and <labels> . The checkbox now precedes the <label> .

<div>
<input id="_4" type="checkbox"/>
<label class="collapse" for="_4">&nbsp;&nbsp;dropdown four</label>

---

JavaScript & CSS - Snippet 1

A simple addition to your CSS and a class added to each <label> :

 label.up::before { content: '▲'; } label.down::before { content: '▼'; } 

Add the class .up to each label:

 <label class='collapse up'... 

Oops I forgot that I used a lil JS:

 label.onclick = function() { if (div.style.display == "block") { div.style.display = "none"; this.classList.remove('down'); this.classList.add('up'); } else { div.style.display = "block"; this.classList.remove('up'); this.classList.add('down'); } }; 

SNIPPET 1

 var labels = document.querySelectorAll(".collapse"); // get all labels for (var i = 0; i < labels.length; i++) { var label = labels[i]; (function(div) { label.onclick = function() { if (div.style.display == "block") { div.style.display = "none"; this.classList.remove('down'); this.classList.add('up'); } else { div.style.display = "block"; this.classList.remove('up'); this.classList.add('down'); } }; })(label.parentNode.querySelector("div")); } 

 .collapse { cursor: pointer; display: block; color: #6490d6; background: #fff; min-width: 180px; border-radius: 10px; padding: 5px 10px; display: inline-block; font-family: calibri; font-weight: bold; color: #6490d6; text-decoration: none; text-shadow: 0px 1px 0px #fff; border: 1px solid #a6a6a6; margin: 0px auto; margin-top: -5px; box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); -webkit-transition: box-shadow 0.5s; } .collapse:hover { background: #ECECEC; text-decoration: none; color: orange; } .collapse + input { display: none; /* hide the checkboxes */ } .collapse + input + div { display: none; } table { border-collapse: separate; width: 100%; border: none; } td { padding-left: 10px; padding-top: 10px; vertical-align: top; } .artifact_top { padding: 10px; border: 1px solid lightgrey; margin: 10px; overflow: auto; } label.up::before { content: '▲'; } label.down::before { content: '▼'; } 

 <div style="padding-left: 5%;width:450px;"> <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong> </div> <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span> <br/> <br/> <div> <label class="collapse up" for="_1">&nbsp;&nbsp;dropdown one</label> <input id="_1" type="checkbox" /> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem. <br/> <table> <tbody> <tr> <td width="50%"><strong>Artifact Owner</strong> <br/>Architecture</td> <td width="50%"><strong>Template</strong> <br/>View the <a href="#">Architecture Waiver Record template</a> </td> </tr> <tr> <td width="50%"><strong>Approver</strong> <br/>Architecture Lead</td> <td width="50%"><strong>Sample</strong> <br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div> <label class="collapse up" for="_2">&nbsp;&nbsp;drop down two</label> <input id="_2" type="checkbox" /> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem. <br/> <table> <tbody> <tr> <td width="50%"><strong>Artifact Owner</strong> <br/><a href="#" title="Project Manager">PM</a> </td> <td width="50%"><strong>Template</strong> <br/>N/A</td> </tr> <tr> <td width="50%"><strong>Approver</strong> <br/>N/A</td> <td width="50%"><strong>Sample</strong> <br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div> <label class="collapse up" for="_3">&nbsp;&nbsp;dropdown three</label> <input id="_3" type="checkbox" /> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem. <br/> <table> <tbody> <tr> <td width="50%"><strong>Artifact Owner</strong> <br/><a href="#" title="Project Manager">PM</a> </td> <td width="50%"><strong>Template</strong> <br/>View the <a href="#">Communication Matrix template</a>.</td> </tr> <tr> <td width="50%"><strong>Approver</strong> <br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a> </td> <td width="50%"><strong>Sample</strong> <br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div> <label class="collapse up" for="_4">&nbsp;&nbsp;dropdown four</label> <input id="_4" type="checkbox" /> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cruada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem. <br/> <table> <tbody> <tr> <td width="50%"><strong>Artifact Owner</strong> <br/><a href="#" title="Business Analyst">BA</a> </td> <td width="50%"><strong>Template</strong> <br/>View the <a href="#">Current State Business Process Models template</a> </td> </tr> <tr> <td width="50%"><strong>Approver</strong> <br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td> <td width="50%"><strong>Sample</strong> <br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> </div> 

SNIPPET 2

 var labels = document.querySelectorAll(".collapse"); // get all labels for(var i = 0; i < labels.length; i++){ var label = labels[i]; (function(div){ label.onclick = function(){ if(div.style.display == "block"){ div.style.display = "none"; }else{ div.style.display = "block"; } }; })(label.parentNode.querySelector("div")); } 

 .collapse{ cursor: pointer; display: block; color: #6490d6; background: #fff; min-width: 180px; border-radius: 10px; padding: 5px 10px; display: inline-block; font-family: calibri; font-weight: bold; color: #6490d6; text-decoration: none; text-shadow:0px 1px 0px #fff; border:1px solid #a6a6a6; margin:0px auto; margin-top: -5px; box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); -webkit-transition:box-shadow 0.5s; } .collapse:hover { background: #ECECEC; text-decoration: none; color: orange; } input { display: none; /* hide the checkboxes */ } input + .collapse + div { display: none; } table { border-collapse: separate; width: 100%; border: none; } td { padding-left: 10px; padding-top: 10px; vertical-align: top; } .artifact_top { padding: 10px; border: 1px solid lightgrey; margin: 10px; overflow: auto; } [type='checkbox'] + label::before { content: '▲'; } [type='checkbox']:checked + label::before { content: '▼'; } 

 <div style="padding-left: 5%;width:450px;"> <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div> <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span> <br/><br/> <div> <input id="_1" type="checkbox"/> <label class="collapse" for="_1">&nbsp;&nbsp;dropdown one</label> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div> <input id="_2" type="checkbox"/> <label class="collapse" for="_2">&nbsp;&nbsp;drop down two</label> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>N/A</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>N/A</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div> <input id="_3" type="checkbox"/> <label class="collapse" for="_3">&nbsp;&nbsp;dropdown three</label> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div> <input id="_4" type="checkbox"/> <label class="collapse" for="_4">&nbsp;&nbsp;dropdown four</label> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> </div> 

Answer 2

 var labels = document.querySelectorAll(".collapse"); // get all labels for(var i = 0; i < labels.length; i++){ var label = labels[i]; (function(div){ label.onclick = function(){ if(div.style.display == "block"){ div.style.display = "none"; }else{ div.style.display = "block"; } }; })(label.parentNode.querySelector("div")); } 

 .collapse{ cursor: pointer; display: block; color: #6490d6; background: #fff; min-width: 180px; border-radius: 10px; padding: 5px 10px; display: inline-block; font-family: calibri; font-weight: bold; color: #6490d6; text-decoration: none; text-shadow:0px 1px 0px #fff; border:1px solid #a6a6a6; margin:0px auto; margin-top: -5px; box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); -webkit-transition:box-shadow 0.5s; } .collapse:hover { background: #ECECEC; text-decoration: none; color: orange; } .collapse + input { display: none; /* hide the checkboxes */ } .collapse + input + div { display: none; } table { border-collapse: separate; width: 100%; border: none; } td { padding-left: 10px; padding-top: 10px; vertical-align: top; } .artifact_top { padding: 10px; border: 1px solid lightgrey; margin: 10px; overflow: auto; } 

 <div style="padding-left: 5%;width:450px;"> <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div> <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span> <br/><br/> <div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label> <input id="_1" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label> <input id="_2" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>N/A</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>N/A</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label> <input id="_3" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label> <input id="_4" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> </div> 

Answer 3

I wasn't quite sure if you wanted the initial state of the arrows to be up or down, but it looked like you had them set to down in the initial HTML...easy to switch them if needed.

Anyway, I just added two lines to your if statement:

if(div.style.display == "block") {
    div.style.display = "none";
    this.innerHTML = '▼' + this.innerHTML.substring(1,label.innerHTML.length);
} else {
    div.style.display = "block";
    this.innerHTML = '▲' + this.innerHTML.substring(1,label.innerHTML.length);
}

Each line removes the first character (the Unicode arrow) from the label's innerHTML, and replaces it with the new arrow.

Keep in mind, this would only work if the Unicode character was the first character in the innerHTML.

 var labels = document.querySelectorAll(".collapse"); // get all labels for(var i = 0; i < labels.length; i++){ var label = labels[i]; (function(div){ label.onclick = function(){ if(div.style.display == "block"){ div.style.display = "none"; this.innerHTML = '&#x25BC;' + this.innerHTML.substring(1,label.innerHTML.length); }else{ div.style.display = "block"; this.innerHTML = '&#9650;' + this.innerHTML.substring(1,label.innerHTML.length); } }; })(label.parentNode.querySelector("div")); } 

 .collapse{ cursor: pointer; display: block; color: #6490d6; background: #fff; min-width: 180px; border-radius: 10px; padding: 5px 10px; display: inline-block; font-family: calibri; font-weight: bold; color: #6490d6; text-decoration: none; text-shadow:0px 1px 0px #fff; border:1px solid #a6a6a6; margin:0px auto; margin-top: -5px; box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); -webkit-transition:box-shadow 0.5s; } .collapse:hover { background: #ECECEC; text-decoration: none; color: orange; } .collapse + input { display: none; /* hide the checkboxes */ } .collapse + input + div { display: none; } table { border-collapse: separate; width: 100%; border: none; } td { padding-left: 10px; padding-top: 10px; vertical-align: top; } .artifact_top { padding: 10px; border: 1px solid lightgrey; margin: 10px; overflow: auto; } 

 <div style="padding-left: 5%;width:450px;"> <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div> <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span> <br/><br/> <div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label> <input id="_1" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label> <input id="_2" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>N/A</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>N/A</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody></table> </div> </div> <br/> <div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label> <input id="_3" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> <div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label> <input id="_4" type="checkbox"/> <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/> <table> <tbody><tr> <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td> <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td> </tr> <tr> <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td> <td width="50%"><strong>Sample</strong><br/>N/A</td> </tr> </tbody> </table> </div> </div> <br/> </div>