Side bar Help

Jan

2012

Ok This is my Message Content on my Home Page:

Code:: <p style="font-family:verdana;color:red;">Side Bar</p> <li><a href="My Forum Link"><img src="http://clanfru.com/Templates/fru/Images/button_profile.png" alt="Your Profile"></a></li>

Then i added this to CSS styleSheet

Code:: ul.sidebar{ list-style: none; margin:0px; padding:12px; position:fixed; left:10px; top:250px; } ul.sidebar li{ padding-bottom:4px; padding-left:10px; } ul.sidebar li img{ opacity:0.5; } ul.sidebar li img:hover{ opacity:1.9; } ul.sidebar li p{ opacity:0.5; } ul.sidebar li p:hover{ opacity:1.9; }

However i want to add a Collapsible DIV like so http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
If anyone can help i would appreciate it.

1 Rideem3, on 21/01/2012 at 21h11

First replace the first code with this:

Code:: <div id="slide"><p style="font-family:verdana;color:red;">Side Bar</p> <li><a href="My Forum Link"><img src="http://clanfru.com/Templates/fru/Images/button_profile.png" alt="Your Profile"></a></li></div><br /><input type="button" value="Collapse" id="hide" onclick="jQuery('#slide').slideUp(); jQuery('#hide').hide(); jQuery('#show').show();" /><input type="button" value="Expand" onclick="jQuery('#slide').slideDown(); jQuery('#show').hide(); jQuery('#hide').show();" id="show" style="display: none;" />

And that's it Wink

It's not exactly like the tutorial but does the same.

2 uJhisper, on 22/01/2012 at 16h36

Tanks Solved ! can be locked!

3 Rideem3, on 22/01/2012 at 17h06

Topic Solved & Locked