/    Sign up×
Community /Pin to ProfileBookmark

expanding/collapsing individual list elements

Copy linkTweet thisAlerts:
Oct 06.2006

On page load lists (more than one) similar to the following are loaded…

[code]

<div>
<ul>
<li class=”open”>Foo <a href=”url”>foo link</a></li>
<li class=”shut”>Bar <a href=”url”>bar link</a></li>
<li class=”shut”>Fud <a href=”url”>fud link</a></li>
</ul>
</div>

[/code]

…then i have some css similar to this…

[code]

li.open a {display:inline}
li.shut a {display:none}

[/code]

now, i want to build a function that switches the elements class between “open” and “shut” onclick, and if it switches it to open, then it switches all other elements of that specific list to shut without affecting other lists on the page. I can’t seem to wrap my head around it even though i’m positive i’ve seen it done before…

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@severianOct 06.2006 — Haven't tested this, but hopefully it'll at least give you some ideas. Try attaching the toggle function to the onclick handler of each list item.
function toggle() {
this.className = "open";
var items = this.parentNode.getElementsByTagName("li");
for(var i=0,len=items.length;i&lt;len;i++) {
if (items[i] != this) items[i].className = "shut";
}
}
Copy linkTweet thisAlerts:
@bcamp1973authorOct 07.2006 — i like it! much simpler than i thought the code would have to be. it's not working for me though. not sure why yet. this isn't an IE only script is it?
Copy linkTweet thisAlerts:
@severianOct 07.2006 — It shouldn't be IE-only, though as I said I didn't test it. I'm taking off for the weekend, otherwise I'd look into it. Maybe on Monday. Anyway, good luck!
Copy linkTweet thisAlerts:
@bcamp1973authorOct 07.2006 — thanks severian! anyone else? it seems the problem is with this line...

var items = this.parentNode.getElementsByTagName("li");
Copy linkTweet thisAlerts:
@JMRKEROct 07.2006 — See if it works when you use "LI" instead of "li"

I don't know for sure, but I think I have see this before somewhere about Case.
Copy linkTweet thisAlerts:
@bcamp1973authorOct 07.2006 — grr...doesn't look like that's going to work for me either, thanks for the suggestion tho JMRKER, can anyone recommend a good tutorial that makes use of parentnode? maybe that would get me set in the right direction. so far what i'm finding online is void of useful details
Copy linkTweet thisAlerts:
@bcamp1973authorOct 07.2006 — BTW, if anyone cares to test, here's code to get you started...

<i>
</i>&lt;style type="text/css"&gt;
li.open a {display:block}
li.shut a {display:none}
li {border:1px solid #EFEFEF;cursor:pointer}
&lt;/style&gt;

&lt;script type="text/javascript" language="javacript"&gt;
function toggle() {
this.className='open';
var items=this.parentNode.getElementsByTagName('li');
for(var i=0,len=items.length;i&lt;len;i++) {
if(items[i]!=this) items[i].className='shut';
}
}
&lt;/script&gt;

&lt;div&gt;
&lt;ul&gt;
&lt;li class="open" onclick="toggle()"&gt;One&lt;a href="x"&gt;This is a test&lt;/a&gt;&lt;/li&gt;
&lt;li class="shut" onclick="toggle()"&gt;Two&lt;a href="x"&gt;This is a test&lt;/a&gt;&lt;/li&gt;
&lt;li class="shut" onclick="toggle()"&gt;Three&lt;a href="x"&gt;This is a test&lt;/a&gt;&lt;/li&gt;
&lt;li class="shut" onclick="toggle()"&gt;Four&lt;a href="x"&gt;This is a test&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@bcamp1973authorOct 07.2006 — I've asked the question more directly in this post...

http://www.webdeveloper.com/forum/showthread.php?p=648656#post648656
×

Success!

Help @bcamp1973 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...