30
What code is used to make "collapsable….expandable…boxes" on websites?
Posted under skin rejuvenationie I have a line saying "This treatment involves a facial and some skin rejuvenation" [more]
and when you click on [more] the window expands down further to reveal some extra text?
Does anyone know what I mean? I don’t know what they’re called, …. is it done in javascript? Thanks!
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.
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 :
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.
Add A Comment