Jump to content

Show/hide listing


kurt.santo
 Share

Recommended Posts

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. :)

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...