Can I show/hide list items, but have the items start off as hidden?

[TAL651]

Hello,

I am using javascript to show/hide nested lists. I modified some code originally posted by ACoder on an earlier thread. Currently, however, the page loads with everything showing. My goal is the reverse: the page should load with everything hidden, and only by activating the script will more items be revealed. So, the default would look like this:

Default:

ITEM 1 Click to show more

---

After click:

ITEM 1 Click to show less

Sub Item

Here is my current javascript code:

function showhideexamples(anchor) {
var span = document.getElementById('subitem1');
    span.style.display = (span.style.display=='block')?'none':'block';
    anchor.innherHTML = (anchor.innherHTML=='Show Examples')?'Hide Examples':'Show Examples';
    }
 

Thanks!

[TAL651]

I need to make one clarification. I realize that I could just code [HTML]style="display:none"[/HTML] , but that kind of goes against the idea of semantic xhtml.

Is there a way I can make the nested list start off as hidden, without resorting to entering style markup? Maybe a javascript that activates on page load?

Thanks.

[r035198x]

I need to make one clarification. I realize that I could just code [HTML]style="display:none"[/HTML] , but that kind of goes against the idea of semantic xhtml.

Is there a way I can make the nested list start off as hidden, without resorting to entering style markup? Maybe a javascript that activates on page load?

Thanks.

You've got it then. Just execute a hide script onload of the page.

[acoder]

You've got it then. Just execute a hide script onload of the page.

Or even use CSS instead, e.g. for an element with id "subitem1":

#subitem1 { display:none; }

[TAL651]

Or even use CSS instead, e.g. for an element with id "subitem1":

#subitem1 { display:none; }

Simple and efficient, thanks! Works great.

Now I have one more issue, this one related to the javascript. I'll show the code first, then ask my question:

Javascript code:

function expandcollapseBGrows(anchor) {
    var span = document.getElementById("BGrows");
    span.style.display = (span.style.display=='block')?'none':'block';
   anchor.innerHTML = (anchor.innerHTML=='hide')?'»':'hide';
   }
 

Now, here's my question. This code currently works - when I click on the hide link, my subitems are hidden and I see a right angle quote. When I click on the right angle quote, my subitems appear, and my link changes to "hide."

If I replace "hide" with "«" in the script, though, I run into a problem. Everything still appears and disappears as it should. However, my link, instead of changing from a right angle quote to a left angle quote, now just changes to a left angle quote, and then stays that way. It doesn't change back to a right angle quote.

This seems strange, since it switches back and forth without problems if it is text. For some reason, though, entity references seem to throw it off.

[TAL651]

Simple and efficient, thanks! Works great.

Now I have one more issue, this one related to the javascript. I'll show the code first, then ask my question:

Javascript code:

function expandcollapseBGrows(anchor) {
    var span = document.getElementById("BGrows");
    span.style.display = (span.style.display=='block')?'none':'block';
   anchor.innerHTML = (anchor.innerHTML=='hide')?'»':'hide';
   }
 

Now, here's my question. This code currently works - when I click on the hide link, my subitems are hidden and I see a right angle quote. When I click on the right angle quote, my subitems appear, and my link changes to "hide."

If I replace "hide" with "«" in the script, though, I run into a problem. Everything still appears and disappears as it should. However, my link, instead of changing from a right angle quote to a left angle quote, now just changes to a left angle quote, and then stays that way. It doesn't change back to a right angle quote.

This seems strange, since it switches back and forth without problems if it is text. For some reason, though, entity references seem to throw it off.

I'm going to move this to a new post, since it's a different question than the original post...

[acoder]

Simple and efficient, thanks! Works great.

JavaScript is great, but not always the best tool for every problem.