Expand/Collapse list

Hi

I have built these scripts before, but I've always felt it was a bit of a hack.  I'd like to get a really solid, browser-compatible version of this expand-collapse list script below.

The problem is that normally these things work with the onclick event, by clicking on the top link or a plus/minus icon.  However, my nested lists are lists of links which launch their content in a new window.  I don't want the list to collapse everytime somebody clicks on one of the nested/sub list links.  It needs to stay open until the top header link is clicked again.

See below.  Thanks

<ul>
<li>List 1:  Click this item to expand my sublist and stay open until somebody clicks on me again.
<ul>
<li><a href="#" onclick="openinnewwindow">Sublist item 1 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 2 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 3 - do not collapse list when you click on me</a></li>
</ul>
</li>
</ul>

<ul>
<li>List 2:  Click this item to expand my sublist and stay open until somebody clicks on me again.
<ul>
<li><a href="#" onclick="openinnewwindow">Sublist item 1 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 2 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 3 - do not collapse list when you click on me</a></li>
</ul>
</li>
</ul>


etc.
Lady_MAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Here
<script>
function toggle(idx) {
  document.getElementById('list'+idx).style.display=(document.getElementById('list'+idx).style.display=='none')?'':'none';
}  
</script>
 
<ul>
<li onClick="toggle(1)">List 1:  Click this item to expand my sublist and stay open until somebody clicks on me again.
<ul id="list1" style="display:none">
<li><a href="#" onclick="openinnewwindow">Sublist item 1 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 2 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 3 - do not collapse list when you click on me</a></li>
</ul>
</li>
</ul>
 
<ul>
<li onClick="toggle(2)">List 2:  Click this item to expand my sublist and stay open until somebody clicks on me again.
<ul id="list2" style="display:none">
<li><a href="#" onclick="openinnewwindow">Sublist item 1 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 2 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 3 - do not collapse list when you click on me</a></li>
</ul>
</li>
</ul>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lady_MAuthor Commented:
Hi mplungjan

Thanks for that.

The problem with this approach is that when you click on a link in the nested list the list collapses again.  I need it to stay open until you click on the link in the top-level list.

Thanks
LM
0
Michel PlungjanIT ExpertCommented:
Oops.. You are right..

Here

<li><span  onClick="toggle(1)">List 1:  Click this item to expand my sublist and stay open until somebody clicks on me again.</span></li>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Lady_MAuthor Commented:
Hmm, still not working.  I can't put the </li> at the end of that line because it contains a nested list.  This is what I have:

<ul>
<li><span  onClick="toggle(1)">List 1:  Click this item to expand my sublist and stay open until somebody clicks on me again.</span>
<ul id="list1" style="display:none">
<li><a href="#" onclick="openinnewwindow">Sublist item 1 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 2 - do not collapse list when you click on me</a></li>
<li><a href="#" onclick="openinnewwindow">Sublist item 3 - do not collapse list when you click on me</a></li>
</ul>
</li>
</ul>
0
Lady_MAuthor Commented:
Sorry, I didn't read your reply properly.  I've corrected it and it's working now.  Thanks, that's great.
0
Michel PlungjanIT ExpertCommented:
Great... Yeah sorry about the </li> did not make a difference though
0
Lady_MAuthor Commented:
Hi,
how would I amend this so that it showed a plus or minus background image depending on its collapsed or expanded status?

thanks
0
Michel PlungjanIT ExpertCommented:
<script>
function toggle(idx,li) {
li.className=(document.getElementById('list'+idx).style.display=='none')?'plus':'minus'
document.getElementById('list'+idx).style.display=(document.getElementById('list'+idx).style.display=='none')?'':'none';

}  
</script>

<li onClick="toggle(1,this)">
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.