JavaScript – Toggle Function to Hide and Show Content, Expanding DIV

Posted onAuthorMrNetTek

email me

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
<script type="text/javascript">
function toggleContent() {
     // Get the DOM reference
     var contentId = document.getElementById("content");
    
     // Toggle 
     contentId.style.display == "block" ? contentId.style.display = "none" : 
     contentId.style.display = "block"; 

if (contentId.style.display == "none") {
     minimizeFunction(); // add your code or function here
} else {
     maximizeFunction(); // add your code or function here
}
}
</script>

 

Add to DIV

<div ID="content" style="display:block;">Some Content Here</div>

 

Call the Function

<span onclick="toggleContent();">*</span>

 


Notes

http://hilite.me/

Demo of my functions…

 function minimizeFunction()
 {
 var t = document.getElementById("txaPad");
 var h = window.innerHeight ? window.innerHeight :
 t.parentNode.offsetHeight;

 t.style.height = (h - t.offsetTop - 48) + "px";

 }
  
 
 
 function maximizeFunction()
 {
 var t = document.getElementById("txaPad");
 var h = window.innerHeight ? window.innerHeight :
 t.parentNode.offsetHeight;

 t.style.height = (h - t.offsetTop - 104) + "px";

 }