Show/hide listing

[kurt.santo]

Can I hide a listing when the page is loaded and show it when a certan button is clicked (and hide it again when any button outside the list is clicked)? Or do I need to use JavaScript for that?Kurt

[Err]

You can try this: http://www.cssplay.co.uk/menu/more

[Guest FirefoxRocks]

Yes you need JavaScript to do that, more specifically, it is called DOM. What this means is that the JavaScript controls the CSS of the element that you are hiding/changing.It is very simple, it requires only an onclick event but I forgot how to do it.

[kurt.santo]

Yes you need JavaScript to do that, more specifically, it is called DOM. What this means is that the JavaScript controls the CSS of the element that you are hiding/changing.It is very simple, it requires only an onclick event but I forgot how to do it.

Cheers!!! I will certainly take your advice and also have a go with the given example. Looks very neat. Great that it is available for general usage...Kurt

[zppblood]

Here is a simple one.

<script type="text/javascript">  function show_hide() {	ge=document.getElementById("disp").style;	if (ge.visibility=="hidden") {	  ge.visibility="visible";	}	else {	  ge.visibility="hidden";	}  }</script><input type="button" value="Show/Hide Text" onclick="show_hide()"><p style="visibility: hidden" id="disp">This is some text.</p>

[jason]

Here is a simple one.

<script type="text/javascript">  function show_hide() {	ge=document.getElementById("disp").style;	if (ge.visibility=="hidden") {	  ge.visibility="visible";	}	else {	  ge.visibility="hidden";	}  }</script><input type="button" value="Show/Hide Text" onclick="show_hide()"><p style="visibility: hidden" id="disp">This is some text.</p>

style="visibility: hidden"style="display: none"what is the difference between them?

[jlhaslip]

Both of them make it so the content of the element is not seen. The difference is how they do it. Visiblity: hidden takes up space on the page layout, whereas display:none doesn't.http://www.w3.org/TR/REC-CSS2/visufx.html#visibilityhttp://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

[kurt.santo]

Both of them make it so the content of the element is not seen. The difference is how they do it. Visiblity: hidden takes up space on the page layout, whereas display:none doesn't.http://www.w3.org/TR/REC-CSS2/visufx.html#visibilityhttp://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

. Thank you for the code, working well with FF, but not so much with IE:-( Also, I would like just to have some of my normal list items to act as button (with all the style that goes along). How could I achieve this? And how would you recommed to do it when you have six sections that should be opened when the relevant <li> is clicked?Cheers,Kurt

[jlhaslip]

Use a javascript solution.Link to : http://www.jlhaslip.com/aef_103_demo/Sign-on as a member and go to the User Control Panel. The menu on the left uses javascript to expand/contract the divisions.*edit*I've been meaning to create a Demo of this technique, perhaps this Topic will motivate me... :)I will post back if I can get it done soon...

[Skemcin]

Try this:http://w3schools.invisionzone.com/index.php?showtopic=9500

[kurt.santo]

Try this:http://w3schools.invisionzone.com/index.php?showtopic=9500

Thank you for your replies. Will have a go on the given examples and see which one is working for me... Let you know once I have it running...Kurt

[kurt.santo]

Thank you for your replies. Will have a go on the given examples and see which one is working for me... Let you know once I have it running...Kurt

I tried the given examples, but unfortunately it does not do what I am after...Skemcin, your example would have been perfect, but it does not work with IE. A real shame...The other ones probably need to be modified to my needs, but I am not knowledgeable enough to do so (at least not in the next ten years;-))...I simply have my nav bar

<ul><li><a href="intro.htm">heading</a></li><li>><a href="item1.htm">item 1</a></li><li>><a href="item2.htm">item 1</a></li>and so on</ul>

The click should trigger two things: Opening of the intro page and also expanding the nav bar (if that is possible at all)...Kurt

[kurt.santo]

IE blatantly ignores and display: none or visibility: hidden... What a nightmare... Is there no way around this?Kurt

[kurt.santo]

Getting closer...Using the following script and CSS:

<style type="text/css">#foo	{display:none;}</style><script type="text/javascript">function applyDisplay(value){ document.getElementById("foo").style.display = value;}</script>

and the following HTML (jumbled mesh just for testing/ had to be in tables for some reason to work):

<table width="120">    <tr><td width="120" bgcolor="#3366CC"><a href="Product.php"    onclick="applyDisplay('block'); return false;">    Shanghai </a></td>    </tr>  <tr id="foo"><td><ul><li>Table</li>  <li>Chairs</li>  <li>Chest of drawers</li>  <li>Cabinet</li>  <li>Nightstand</li>  <li>Dresser</li>  <li>Mirror</li>  </ul></td></tr></table> 

So, now IE finally initially hides the thing and clicking onto Shanghai brings the stuff out. Great so far (at least a change to not doing anything before). Now the problem is how to hide it again and how to be able to "return false" to "return true"? I mean let the user go to the other page, but still keep the thing open?Kurt

[jlhaslip]

Are you looking for a drop-down menu?http://www.cssplay.co.uk/menus/variable_dl.html

[kurt.santo]

Are you looking for a drop-down menu?http://www.cssplay.co.uk/menus/variable_dl.html

I am after a vertical one. My list goes from top to bottom (on left side). But thanks anyway...Have a list with some items, which are heading and some which are sub-items. Initially just the five headings should show, but when one heading is clicked upon the relevant-sub-items should open underneath (and obviously moving the next heading a bit further down). The headings also link to particular pages (the entry pages for the relevant items).For my friend SEO is really important and there are a lot of keywords in his nav bar, so I have to be careful with that side of things...Is it at all possible to have the next page "remember" what is already opened? I mean when the user clicks on the heading, which opens the sub-items he also wil go to a different page. Obviously, I do not want to close again the open selection for him...Kurt

[Skemcin]

IE blatantly ignores and display: none or visibility: hidden... What a nightmare... Is there no way around this?Kurt

I use those scripts all over the place and I'm certain they work in all the major browsers. The only version of IE I have not tested that in is IE 7. I wonder if there is a syntax issue or if you are using IE 7 and it simply doesn't work.If it is the later, I'd like to send you a couple of sites where I use it and you can let me know if it works.Thanks

[kurt.santo]

I use those scripts all over the place and I'm certain they work in all the major browsers. The only version of IE I have not tested that in is IE 7. I wonder if there is a syntax issue or if you are using IE 7 and it simply doesn't work.If it is the later, I'd like to send you a couple of sites where I use it and you can let me know if it works.Thanks

I use IE 7 and just opened the given examples without any alterations. Send me the links and I will test your sites...Kurt