Comments on: What code is used to make "collapsable….expandable…boxes" on websites? http://www.antiagingskincareproductreview.com/skin-rejuvenation/what-code-is-used-to-make-collapsable-expandable-boxes-on-websites Helping You Look A Million Dollars! Thu, 26 Aug 2010 09:50:59 +0100 http://wordpress.org/?v=2.8.2 hourly 1 By: winkelthorp http://www.antiagingskincareproductreview.com/skin-rejuvenation/what-code-is-used-to-make-collapsable-expandable-boxes-on-websites/comment-page-1#comment-1151 winkelthorp Fri, 30 Oct 2009 13:01:59 +0000 http://www.antiagingskincareproductreview.com/skin-rejuvenation/what-code-is-used-to-make-collapsable-expandable-boxes-on-websites#comment-1151 What you need is some javascript and css. CSS: <style> .show {} .hide { display:none; background-color:white;cursor:hand;} </style> Put that in the head section of the page. The javascript: <script> function expandText(id){ child = document.getElementById(id) if (child == null) return; else { if (child.className == 'hide') { child.className = 'show'; } else { child.className = 'hide'; } } } </script> Also put that in the head section of the page. Then make a link with a javscript onclick of the function expandText with the id of the element you'd like to expand in the body section of the page: <a href="#" onClick="expandText('div_info')">Expand The Info div</a> <div id='div_info'> This is where the hidden text is put and the above link will cycle its visibiliy </div> Try it out. It'll work, when used properly. I use these all the time; They're very useful.<br><b>References : </b><br>Me, myself, I, and my brain. What you need is some javascript and css.

CSS:
<style>
.show {}
.hide { display:none; background-color:white;cursor:hand;}
</style>

Put that in the head section of the page.

The javascript:
<script>
function expandText(id){
child = document.getElementById(id)
if (child == null)
return;
else
{
if (child.className == ‘hide’)
{
child.className = ’show’;
} else
{
child.className = ‘hide’;
}
}
}

</script>

Also put that in the head section of the page.

Then make a link with a javscript onclick of the function expandText with the id of the element you’d like to expand in the body section of the page:

<a href="#" onClick="expandText(’div_info’)">Expand The Info div</a>
<div id=’div_info’>
This is where the hidden text is put and the above link will cycle its visibiliy
</div>

Try it out. It’ll work, when used properly. I use these all the time; They’re very useful.
References :
Me, myself, I, and my brain.

]]> By: alphaant@ymail.com http://www.antiagingskincareproductreview.com/skin-rejuvenation/what-code-is-used-to-make-collapsable-expandable-boxes-on-websites/comment-page-1#comment-1150 alphaant@ymail.com Fri, 30 Oct 2009 12:21:59 +0000 http://www.antiagingskincareproductreview.com/skin-rejuvenation/what-code-is-used-to-make-collapsable-expandable-boxes-on-websites#comment-1150 DHTML (Dynamic HTML) is key. It is comprised of HTML, CSS, JavaScript and the DOM (Document Object Model). Using client-side JavaScript, you can manipulate the appearance of elements within the page and even animate them. There are countless resources/tutorials to learn DHTML. To make DHTML really easy, check out the jQuery library. It makes traversing the DOM as easy as working with CSS. http://jquery.com/<br><b>References : </b><br> DHTML (Dynamic HTML) is key. It is comprised of HTML, CSS, JavaScript and the DOM (Document Object Model). Using client-side JavaScript, you can manipulate the appearance of elements within the page and even animate them. There are countless resources/tutorials to learn DHTML. To make DHTML really easy, check out the jQuery library. It makes traversing the DOM as easy as working with CSS.

http://jquery.com/
References :

]]>