jQuery non-UL Accordion / Need header div seperate from content div

I have found exactly what I need on the jQuery UI examples: Collapsable Content Accordion.

The problem is that I need a content-div to slideToggle via a menu-button-div. Every example and tutorial I find requires that you have the header directly abo开发者_StackOverflow社区ve the content. This makes research tricky.

Two problems ::: Getting a double call to the slide effect and cannot figure out how to circumvent it. I also cannot get the content-div to collapse when the associated menu-button-div is clicked.

This example will make the problem clear. http://jsfiddle.net/4a5WL/

$('#menu1').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_about').slideDown(400);
   });
  });

 $('#menu2').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_newsletter').slideDown(400);
   });
  });

 $('#menu3').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_contact').slideDown(400);
   });
  });

You're getting a double call to your slideDown() effect because that animation is performed after each other panel is collapsed. Since there are two other panels, it will be performed twice.

You'll have to ensure it only animates the panel once even if it's called multiple times. I used a local variable to do that, other solutions exist (but I couldn't use :animated in your case).

I also used the data() facility of jQuery to associate each panel with its trigger menu item, in order to reduce code duplication. The result, which seems to do what you want, is as follows:

$(document).ready(function() {
    $("#menu1").data("panelId", "#collapse_about");
    $("#menu2").data("panelId", "#collapse_newsletter");
    $("#menu3").data("panelId", "#collapse_contact");

    $("#menu1, #menu2, #menu3").click(function() {
        var first = true;
        var panelId = $(this).data("panelId");
        $(".class1").not(panelId).slideUp(function() {
            if (first) {
                first = false;
                $(panelId).slideToggle(400);
            }
        });
    });
});

The updated fiddle can be found here.