Create your own little accordions with javascript, no plugin needed - great for html sites, or platforms a plugin cannot be used / added
HTML
<h1 class="expand">
<a id="expand" href="javascript:expand('expand-content','expand');" >TITLE +</a>
</h1>
<a id="expand" href="javascript:expand('expand-content','expand');" >TITLE +</a>
</h1>
<div id="expand-content" style="display: none;">Content</div>
Javascript
<script type="text/javascript">
function expand(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
function expand(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
**make sure to each collapsible block has a unique ID “expand-content” “expand-content-2” etc.
Leave a Reply