Close the Accordion Please! Created Jan 6, 2010

Hi,

I have the same problem with the accordion tabs. Did you find any turn around to fix this?

~F

I ended up using a different string of code to operate the accordion, not the Jquery Tools, but close. Thanks to the chap in the depths of this forum that wrote the first version of this. You may have to futz around with the selectors to make it apply to your layout. Hope this helps.

$(document).ready(function(){

	//Hide (Collapse) the toggle containers on load
	$("#accordion div.pane").(hide); 

	//Switch the "Open" and "Close" state per click
	$("h3").toggle(function(){
		$(this).addClass("current");
		}, function () {
		$(this).removeClass("current");
	});

	//Slide up and down on click
	$("h3").click(function(){
		$(this).next("#accordion div.pane").slideToggle("slow");
	});

});

Here's how I used it:http://www.floridaanimalcontrol.org

Thanks for the code this worked great. It is too bad this is not built in to the tools.

Thank you so much for this. Looked for a veeeeeeeeeerrrry long time for this solution.

thanks a lot drustar. by the way you are the web master of the page link you put...

if you are i have a little recomendation...the dog-cat.jpg image have something wierd on the cats paw. so if you like you can use the one i modified and optimize...

http://tinyurl.com/y8hh5yq

hope you like it!

Actually what you saw as 'weird' about the cats paws were the paws themselves! you just made that poor cat an amputee!

Thanks for the advice, serge512 :)

funny cat.... indeed.. well worth the try.

and once aging your code was inded really help full...

Works great.

I'm a bit late to this party. Love this solution, but it allows more than one pane to remain open at a time. What if we want the ability to toggle a pane open/closed, but with only one pane open at a time?

I've made my own solution which works great for me and does exactly what you want:

First off, I instantiate my accordion just like it is done in examples:

	$("#accordion").tabs("#accordion div.pane",
		{
			tabs: 'h2', effect: 'slide', initialIndex: null
		}
	);

Than I want my currently active header to close the accordion, so I made this adding two additional classes and standard JQuery functions slideUp() and slideDown()

	$("#accordion h2.current").click(function () 
	{
		if($(this).attr("class") != "opened current")
		{
			$(this).addClass("opened");
			if($(this).hasClass("closed"))
			{
				$(this).removeClass("closed opened current") ;
				$(this).addClass("opened current");
				var api = $("#accordion").data("tabs");
				api.getCurrentPane().slideDown();
			}
		}
		else
		{
			var api = $("#accordion").data("tabs");
			api.getCurrentTab().removeClass("current");
			if(api.getCurrentTab().hasClass("opened")) api.getCurrentTab().removeClass("opened") ;
			$(this).addClass("closed");
			api.getCurrentPane().slideUp();
		}
	});

I'm not sure that this is the easiest way to accomplish the goal, but I'm very newbie in jQuery and JS and did my best. Maybe someone will clean up my code a bit.
Of course don't forget about selectors which may be different from mine. My accordion HTML layout looks like this

<div id="accordion">
     <h2>Header 1</h2> 
     <div class="pane">
          Content 1
     </div>
     <h2>Header 2</h2> 
     <div class="pane">
          Content 2
     </div>
...
</div>

Sorry for my poor English.

Using the standard approach

//First UNBIND the existing click handler
$('#accordian h2').unbind('click');

// add new click handler
$('#accordian h2').click(function (){
     // First make other panes hidden
     $(this).siblings('h2').removeClass();
     $(this).siblings('div').slideUp();
     // Test if clicked on current
     if(!$(this).hasClass("current")){
         //If not, then make me current
         //preserving Toggle feature
         $(this).addClass("current");
         $(this).next().slideDown()
       } else {
         //If so, then close me too
         $(this).removeClass();
         $(this).next().slideUp()
       }
  }
 );

I hope this works for someone.

Thank you for the code, I found that it did work, but there are 2 things that need updating.

First is just a spelling issue "accordion" it's ion not ian.

The second thing is that if you open two panes and click on the last pane opened (the one that now has the "current" class applied to it) all is good, but if you click on the 1st pane you opened which no longer has the class of "current" nothing happens and you must click on it again (because now it will have the class "current" applied to it).

I don't know jquery so I can't help there.

Cheers
Jules

I subscribe to experts-exchange.com and enlisted their help to find a solution. Here is what they came up with, works perfectly for what I needed.

Cheers!
Jules

$(".accordion > h2").bind("click", function(){
	$(".pane").slideUp("slow");
	if($(this).hasClass("current")){
		$(this).removeClass("current");
	}else{
		$(".accordion > h2").removeClass("current");
		$(this).addClass("current");
		$(this).next().slideDown("slow");
	}

I've created a basic solution:http://flowplayer.org/tools/forum/25/29699