Hey guys, I was browsing the web a bit and came across a site that had a table that was like 100 feet tall that had a ton of links all ordered by theme. I thought
Anyway, long story short I came around to figuring a way to make an expanding list with Javascript, CSS, and some <div>'s. I thought I might share it with you guys because I think it's cool and useful
.
The Javascript Function that makes it work:
NOTE: pos.gif and neg.gif are small images of plus and minus signs that change depending on whether the current section is expanded or not.
And here is what the CSS code should look like:
And Finally the HTML <div>'s (which are organized in a definition list [<dl>]).
NOTE: **IMG ID** and **DIV ID** should be the same in both places. Use something like 'wowimg' and 'wowdiv' so that the two related things can be more organized looking when reviewed.
The cool thing about this is that it is a singular function for every expanding section. You can make a whole tree (expanding sections within expanding sections) as long as each expansion has it's own unique Div id and img id, because that is the information used in the function.
So, go ahead, use it if you like...or don't if you don't want to! But either way, tell me what you think
Oh by the way, click my sig, then navigate to the 'our favorite links' page to see an example.
| My Thoughts wrote: |
Hey  , Wouldn't it look alot better, take less space, and be more organized, if that info was stored in an expanding list? |
Anyway, long story short I came around to figuring a way to make an expanding list with Javascript, CSS, and some <div>'s. I thought I might share it with you guys because I think it's cool and useful
.
The Javascript Function that makes it work:
| Code: |
|
<script type="text/javascript"> function toggleDiv(txt, image){ var content = document.getElementById(txt); var pic = document.getElementById(image); if(content.className == 'divHide'){ content.className = 'divShow'; pic.src ='../images/neg.gif'; pic.alt ='neg'; } else{ content.className = 'divHide'; pic.src ='../images/pos.gif'; pic.alt='pos'; } }; </script> |
NOTE: pos.gif and neg.gif are small images of plus and minus signs that change depending on whether the current section is expanded or not.
And here is what the CSS code should look like:
| Code: |
|
<style type="text/css"> .divHide {display:none;} .divShow {display:block;} </style> |
And Finally the HTML <div>'s (which are organized in a definition list [<dl>]).
| Code: |
|
<dt><div style="width:200px;"><a href="#" onClick="toggleDiv('**DIV ID**','**IMG ID**')"><img id="**IMG ID**" border="0" alt="pos" src="../images/pos.gif" /></a>Heading</div></dt> <dd><div class="divHide" style="width:200px;" id="**DIV ID**"> <ul type="none"> <li>Content</li> </ul> </div></dd> |
NOTE: **IMG ID** and **DIV ID** should be the same in both places. Use something like 'wowimg' and 'wowdiv' so that the two related things can be more organized looking when reviewed.
The cool thing about this is that it is a singular function for every expanding section. You can make a whole tree (expanding sections within expanding sections) as long as each expansion has it's own unique Div id and img id, because that is the information used in the function.
So, go ahead, use it if you like...or don't if you don't want to! But either way, tell me what you think
Oh by the way, click my sig, then navigate to the 'our favorite links' page to see an example.
