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( == "0px" || == "" || == 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.scrollHeight+"px";//finds the height of the details and then shows it = "0 0 6px 6px";//curving the div = "all linear 0.3s";//smooth change
arrow.innerHTML = "&#9654;"; = "0px"; = "all linear 0.3s";


<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
//more in the download