FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Expanding Javascript+CSS List





Mosquito.Tyler
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
My Thoughts wrote:
Hey Exclamation , 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 Wink .

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 Wink

Oh by the way, click my sig, then navigate to the 'our favorite links' page to see an example.
binsmyth
thanks for this script it is really really useful. and come to think of it really simple. This is the best tutorial that i got for the tree navigation. 3 simple scripts worked excellently. Because it is not completed I can use it in different form and modify according to my needs like put it in a php. make it like a function in a php etc.
Thanks
reneuend
Hey. I tried out your code. It works well and you left it so I can design as needed. Not only does it work, but it is a simple solution unlike the multitudes that I found out on the web.

Great job! Wink
Related topics
What computer languages you know?
internet explorer
Windows Tips&tricks!
CSS or Javascript?
PHP/Blogger error
Flash is for...?
[JS]Some must have Javascript and related stuffs-updated!!!!
Javascript CSS changer.
Compatibility among IE, Firefox and Opera
"Web Pages That Suck" Website and Books
150 frh$ for menubar Please CLOSE
A good place to learn html/php/javascript/etc....
CSS in Action Script
CSS List Problem
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.