By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,946 Members | 1,714 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,946 IT Pros & Developers. It's quick & easy.

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

P: 20
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:

Expand|Select|Wrap|Line Numbers
  1. function showhideexamples(anchor) {
  2. var span = document.getElementById('subitem1');
  3.     span.style.display = (span.style.display=='block')?'none':'block';
  4.     anchor.innherHTML = (anchor.innherHTML=='Show Examples')?'Hide Examples':'Show Examples';
  5.     }
  6.  
Thanks!
Oct 8 '07 #1
Share this Question
Share on Google+
6 Replies


P: 20
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.
Oct 8 '07 #2

10K+
P: 13,264
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.
Oct 8 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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":
Expand|Select|Wrap|Line Numbers
  1. #subitem1 { display:none; }
Oct 8 '07 #4

P: 20
Or even use CSS instead, e.g. for an element with id "subitem1":
Expand|Select|Wrap|Line Numbers
  1. #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:

Expand|Select|Wrap|Line Numbers
  1. function expandcollapseBGrows(anchor) {
  2.     var span = document.getElementById("BGrows");
  3.     span.style.display = (span.style.display=='block')?'none':'block';
  4.    anchor.innerHTML = (anchor.innerHTML=='hide')?'»':'hide';
  5.    }
  6.  
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.
Oct 9 '07 #5

P: 20
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:

Expand|Select|Wrap|Line Numbers
  1. function expandcollapseBGrows(anchor) {
  2.     var span = document.getElementById("BGrows");
  3.     span.style.display = (span.style.display=='block')?'none':'block';
  4.    anchor.innerHTML = (anchor.innerHTML=='hide')?'»':'hide';
  5.    }
  6.  
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...
Oct 9 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Simple and efficient, thanks! Works great.
JavaScript is great, but not always the best tool for every problem.
Oct 9 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.