Comments on: Writing multiple toggle links in JQuery

By: Lee

Lee — Thu, 22 Jul 2010 21:16:32 +0000

Delete the above post and this one then, you need to make it clear to people that:

toggle-item- on each thing they would like to show and hide, should be set to, lets say: toggle-item-link1.

So in other words make sure each “toggle-item-” your hiding and showing has a name of:

“toggle-item-link1″

The “link1″ needs to match the class=”link1″ that called it, so dont just use “toggle-item” and/or “toggle-item-” because that wont work.

Got it ?!?

By: Lee

Lee — Thu, 22 Jul 2010 19:41:58 +0000

Just wanted to say thank you for this “tut”, i was the same as the user above, could not find what i was looking for/to do. Then i did another google only to find this page and BINGO! just what i wanted to do…

What i had been doing was just like you said above:
“But what about if we want to do this for multiple items on the page and not call each item on its own and create a bunch of unnecessary code”

“bunch of unnecessary code”:

$(document).ready(function(){
$(“#open1″).click(function(event){
$(“#block1″).slideFadeToggle(“slow”);
event.preventDefault();
});
$(“#close1″).click(function(event){
$(“#block1″).slideFadeToggle(“slow”);
event.preventDefault(); });
$(“#open3″).click(function(event){
$(“#block3″).slideFadeToggle(“slow”);
event.preventDefault(); });
$(“#close3″).click(function(event){
$(“#block3″).slideFadeToggle(“slow”);
event.preventDefault(); }); });

So yea my code was/is so not the way to do it, sure it works and gets the job done but not when you think about what jQuery was intended for. “Wright Less, Do More”

So thanks dude, im off to code this into my site !

By: Lee

Lee — Thu, 15 Apr 2010 21:52:42 +0000

Spent days researching show/hide to find the best method and you have it by a mile. A HUGE thank you to you.

By: links for 2010-03-02 | Folks Pants

links for 2010-03-02 | Folks Pants — Thu, 08 Apr 2010 17:21:09 +0000

[...] Writing multiple toggle links in JQuery – olliekav.com (tags: jquery toggle) [...]

By: ah.

ah. — Sat, 27 Mar 2010 17:14:38 +0000

This code is terrific. I've implemented it with some success, but have one problem. Using multiple links and multiple divs, the toggle function will turn on each individual div, but it will not close whichever div is currently open. I solved this by adding a hide function to the onclick event and all is well except when you click the same link that is already open. Doing this merely hides and shows the said div rather than reversing its toggle state. So is there a way to build in an if/than function that checks for this and corrects? My code is below:


		/* JQUERY SMOOTH HIDE/DISPLAY CONTENT ONCLICK */
		$(document).ready(function() {
		 // hides the ribbon as soon as the DOM is ready
		 // (a little sooner than page load)
		$('div[class^=ribbon-]').hide();
		 // loop through links and build function
		$('a[class^=link]').click(function() {
			$('div[class^=ribbon-]').hide('fast');
		   	var $this = $(this);
			var x = $this.attr("className");
			$('.ribbon-' + x).toggle(400);
			return false;
			});
		});

And the HTML:


	
		
		
		Home
		Projects
		Videos
		Archives
		Editors
		
		
		
			PROJECTS
			VIDEOS
			ARCHIVES