Jquery переключить аккордеон

Question

Я пытаюсь сделать аккордеон с переключателем, который, кажется, работает довольно хорошо. То, с чем я хотел бы получить некоторую помощь как новичок в javascript, является способом, которым это соединено.

http://jsfiddle.net/z3wW4/

Это не красиво, я знаю ...

    $(document).ready(function() {
     $('#contact').click(function() {
        $('#content2, #content3').hide(200, 'linear');
          $('#content').toggle(700, 'linear');          
    });
});

$(document).ready(function() {
     $('#services').click(function() {
        $('#content, #content3').hide(200, 'linear');
          $('#content2').toggle(700, 'linear');
    });
});

$(document).ready(function() {
     $('#about').click(function() {
        $('#content, #content2').hide(200, 'linear');
          $('#content3').toggle(700, 'linear');
    });
});

Answer 1

Я бы предложил:

 $('#menu > a').click(function() { // specifies which a elements
     var that = $(this), // caching the selectors for performance
         divs = $(this).siblings('div'),
         div = $(this).nextAll('div:first');
     divs.not(div).hide(200, 'linear'); // hides all the sibling divs *except* for the
                                        // immediately following div element
     div.toggle(700, 'linear');         // toggles the immediately-following div
});

JS Fiddle demo .

Ссылки:

• click().
• nextAll().
• not().
• siblings().
• toggle().

Answer 2

ваш код не очень расширяемый, вы можете попробовать это так: http://jsfiddle.net/PzYvA/

$(document).ready(function() {    
    var $menu = $("#menu");
    $menu.children("a").click(function(){
        var $content = $(this).next("div");
        $menu.children("div").not($content).hide(200, 'linear');
        $content.toggle(700, 'linear');
    });
});

также добавьте следующий CSS

#menu > a {
    display:block;
}

и удалите <br /> после тега

Answer 3

Вы видите, что ваши 3 функции имеют совершенно одинаковый код.
Затем вы должны использовать класс html, чтобы определить функции вашего элемента html, а затем с помощью javascript / jquery определить, как работают эти функции.

Это упростит ваш CSS и ваш javascript:

http://jsfiddle.net/td3UB/