Jquery toggle close all but one group of elements

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Jquery toggle close all but one group of elements

Post by RobertGonzalez »

Ok, I am totally loving and hating this Jquery app at the same time.

I want to use it for the richness that it offers. To that end, I have a working JS script that does what I am after. Say I have this markup:

Code: Select all

<div id="main-navigation">
	<h2>Learn PHP</h2>
	<ul class="tree-navigation">
		<li class="branch-open"><a href="#">Introduction</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Introduction - Overview">Overview</a></li>
			<li class="branch-bullet"><a href="#" title="Introduction - Web Servers">Web Servers</a></li>
			<li class="branch-bullet"><a href="#" title="Introduction - What is PHP">What is PHP</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Getting Started</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Getting Started - Getting PHP">Getting PHP</a></li>
			<li class="branch-bullet"><a href="#" title="Getting Started - Installing PHP">Installing PHP</a></li>
			<li class="branch-bullet"><a href="#" title="Getting Started - Configuring PHP">Configuring PHP</a></li>
			<li class="branch-bullet"><a href="#" title="Getting Started - Securing PHP">Securing PHP</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Programming Basics</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Programming Basics - Choosing an Editor">Choosing an Editor</a></li>
			<li class="branch-bullet"><a href="#" title="Programming Basics - Your First Script">Your First Script</a></li>
			<li class="branch-bullet"><a href="#" title="Programming Basics - Coding Syntax">Coding Syntax</a></li>
			<li class="branch-bullet"><a href="#" title="Programming Basics - Commenting">Commenting</a></li>
			<li class="branch-bullet"><a href="#" title="Programming Basics - Code Control">Code Control</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Moving Along</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Moving Along - Types">Types</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Variables">Variables</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Constants">Constants</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Expressions">Expressions</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Operators">Operators</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Control Structures">Control Structures</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Functions">Functions</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Classes and Objects">Classes and Objects</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - References">References</a></li>
			<li class="branch-bullet"><a href="#" title="Moving Along - Reserved Words">Reserved Words</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Handling PHP</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Output Handling">Output Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Error Handling">Error Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Exception Handling">Exception Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Variable Handling">Variable Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - String Handling">String Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Array Handling">Array Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - File Handling">File Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Form Handling">Form Handling</a></li>
			<li class="branch-bullet"><a href="#" title="Handling PHP - Session Handling">Session Handling</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Database Interaction</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Database Interaction - Know Your Database">Know Your Database</a></li>
			<li class="branch-bullet"><a href="#" title="Database Interaction - Database Abstraction">Database Abstraction</a></li>
			<li class="branch-bullet"><a href="#" title="Database Interaction - Handling the Data">Handling the Data</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Common Problems</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Common Problems - Blank Page Displays">Blank Page Displays</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - Headers Already Sent">Headers Already Sent</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - Undefined Index">Undefined Index</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - Parse Errors">Parse Errors</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - General Notices">General Notices</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - General Warnings">General Warnings</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - General Errors">General Errors</a></li>
			<li class="branch-bullet"><a href="#" title="Common Problems - Other Errors">Other Errors</a></li>
		</ul>
		</li>
		<li class="branch-closed"><a href="#">Wrap Up</a>
		<ul>
			<li class="branch-bullet"><a href="#" title="Wrap Up - What's Next">What's Next</a></li>
			<li class="branch-bullet"><a href="#" title="Wrap Up - Resources">Resources</a></li>
		</ul>
		</li>
	</ul>
</div>
On page load I want to be able to scan the 'tree-navigation' UL and toggled closed all branch-closed LI UL's (so the LI's stay open but their child UL's close). On click of the LI's, I want their child LI's to open and have the class of the clicked LI to change to 'branch-open'. The code I am using works, but I would love to be able to confine my self-destruction to one app/framework/library if possible.

A test of what I am doing can be found here. For the sake of this post, pretend that I haven't shown this design yet as I will be posting it soon to the UI board. Thanks for your help.

PS This is related to a previous thread I have posted, but the inner working of this markup are different than in the previous thread so I decided a new thread was in order.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

have you considered using one of the accordion plugins here:
http://docs.jquery.com/Plugins

I haven't tried any of them, but I think that's what you're trying to do, right?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I'll give it a shot this weekend. It is similar. I just want a smooth closing transition instead of that slammed door effect that I have now.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

I would recommend using Interface Elements for all effects. It includes so much stuff (in a configurable download to save space) that you'll never need to look elsewhere for an effect...

http://interface.eyecon.ro/demos/
http://interface.eyecon.ro/demos/accordion.html
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

seems to be working as far as I can tell...

also you may be interested in the slideToggle() method

also, if it's accordian behaviour you're wanting check out
http://www.learningjquery.com/2007/03/accordion-madness
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I think this one (http://www.learningjquery.com/2006/09/s ... w-and-hide) is most in line with what I am wanting to do. Basically I want people to be served the current section they are viewing as open while all the others are closed, but clickable to open SMOOTHLY. I have everything working right now except the smoothly part. Oh yeah, and it is not Jquery that I am using at the moment, so I would love to be able to move to standard library and stick to just that.

I'll keep working on it. Thanks for the help guys.
Post Reply