Collapsible data

Posted in: javascript by musiitwa joseph 2015-02-06 at 00:55:04

image for Collapsible data Collapsible data helps you to hide alot of content only showing a title which can be clicked on to show the hidden content.

<script type="text/javascript">
function __(x){
return document.getElementsByClassName(x);
}
function _(x){
return document.getElementById(x);
}

function toggleDetails(ID){
//ID enables getting of elements dynamically due to the appended value that increments by 1
//getting elements by id
var heading = _("details_"+ID);
var arrow = _("arrow_"+ID);
var details = _("details_"+ID);

var all_details = __("details");
var all_arrows = __("arrow");

if(details.style.height == "0px" || details.style.height == "" || details.style.height == null){
//collapses any detail showing and also changes it arrow to pointing right
for(var i=0; i<all_details.length; i++){
all_details[i].style.height = "0px";
all_arrows[i].innerHTML = "&#9654;";
}

//opens the clicked details to display
arrow.innerHTML = "&#9660;";//arrow points downwards
details.style.height = details.scrollHeight+"px";//finds the height of the details and then shows it
details.style.borderRadius = "0 0 6px 6px";//curving the div
details.style.transition = "all linear 0.3s";//smooth change
}else{
arrow.innerHTML = "&#9654;";
details.style.height = "0px";
details.style.transition = "all linear 0.3s";
}

}
</script>




<div style="text-align:center"><h3>SEMESTER OUTLINE</h3></div>
<ul class="brief_details">
<li id="brief_<?php echo $uid; ?>">
<a href="" onClick="return false;" onMouseDown="return toggleDetails('<?php echo $uid; ?>')"><span class="arrow" id="arrow_<?php echo $uid; ?>">&#9654;</span> Click me</a>
<div class="details" id="details_<?php echo $uid++; ?>">
<div class="container">
This is my content
</div>
</div>
</li>
//more in the download