Multiple accordion panes open

Question

We are using a jquery accordion on our site : http://www.racedayworld.com

It basically lists events under each month...

Apparently people are finding difficulties knowing how it really works and they don't see at first glance that there are more events under each month (that you click to expand)

So I was thinking about opening two at a time (the current month and the next) .. but I'm not sure how to enable both to be open at once ... any ideas?

This is how the accordion panes are getting intialized:

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

Answer 1

If you just want to show the second div in the accordion you can show it after applying the accordion component.

$("#myAccordion").accordion();
$("#secondDivInTheAccordion").show();

This will show the first and second tabs open, until the user clicks one of the tabs. Then it will function as it normally would.

Answer 2

Or you can try this also:

$("div#accordion div.pane").last().css("display", "block");

Same as DangerMouse's answer, just add it after you accordion call, and it would open both tabs at the same time, assuming that you would display only the current and last month in the home page.

Hope it helps.

Answer 3

Try changing your function to this:

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

 $("#accordion h2").click(function(){
  index =  $("h2").index($(this)) + 1;
  // open next tab pane
  $("#accordion .pane:eq(" + index + ")").slideDown(500);
 })
 // open 2nd pane initially
 $("#accordion .pane:eq(1)").slideDown(500);
});

---

Update: If you only want to open two panes initially, then remove the click function in the middle, so you'll end up with this:

$(function() {
 $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: 0});
 // open 2nd pane initially
 $("#accordion .pane:eq(1)").slideDown(500);
});

Edit: if the second pane doesn't appear to open up it may be because the tab script is still setting up, so if you need to, replace the second line with this:

 setTimeout ( function(){ $("#accordion .pane:eq(1)").slideDown(500); }, 500 );