CODEWITHSUNDEEP
javascriptjqueryhtmlanimationaccordion
Berry
Berry

Reputation: 47

How to collapse jQuery accordion menu consisting of div's?

I have seen many similar questions but still haven't found a solution to my problem.

I have made an accordion menu with duplicated jQuery code for every item in the menu. I was wondering if there isn't a more effective way with less jQuery code.

Preferably no changes to the HTML markup please

    $('.what-we-do-toggle1').click(function() {
        $('.what-we-do-text1').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text2').slideUp(200);
        $('.what-we-do-text3').slideUp(200);
        $('.what-we-do-text4').slideUp(200);
        $('.what-we-do-text5').slideUp(200);
        $('.what-we-do-text6').slideUp(200);
    });    
    $('.what-we-do-toggle2').click(function() {
        $('.what-we-do-text2').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text1').slideUp(200);
        $('.what-we-do-text3').slideUp(200);
        $('.what-we-do-text4').slideUp(200);
        $('.what-we-do-text5').slideUp(200);
        $('.what-we-do-text6').slideUp(200);
    });    
    $('.what-we-do-toggle3').click(function() {
        $('.what-we-do-text3').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text1').slideUp(200);
        $('.what-we-do-text2').slideUp(200);
        $('.what-we-do-text4').slideUp(200);
        $('.what-we-do-text5').slideUp(200);
        $('.what-we-do-text6').slideUp(200);
    });    
    $('.what-we-do-toggle4').click(function() {
        $('.what-we-do-text4').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text1').slideUp(200);
        $('.what-we-do-text2').slideUp(200);
        $('.what-we-do-text3').slideUp(200);
        $('.what-we-do-text5').slideUp(200);
        $('.what-we-do-text6').slideUp(200);
    });    
    $('.what-we-do-toggle5').click(function() {
        $('.what-we-do-text5').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text1').slideUp(200);
        $('.what-we-do-text2').slideUp(200);
        $('.what-we-do-text3').slideUp(200);
        $('.what-we-do-text4').slideUp(200);
        $('.what-we-do-text6').slideUp(200);
    });    
    $('.what-we-do-toggle6').click(function() {
        $('.what-we-do-text6').animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
        $('.what-we-do-text1').slideUp(200);
        $('.what-we-do-text2').slideUp(200);
        $('.what-we-do-text3').slideUp(200);
        $('.what-we-do-text4').slideUp(200);
        $('.what-we-do-text5').slideUp(200);
    });

http://codepen.io/berry807/pen/KdGeVG

Upvotes: 1

Views: 79

Answers (3)

Popnoodles
Popnoodles

Reputation: 28419

Without changing markup

$('#what-we-do .row > div').click(function() {
    $('#what-we-do .row > div p').stop().slideUp(); // slide all up
    $(this).find('p').stop().slideToggle(); // slide this one down
});

http://codepen.io/anon/pen/mezKBB

Upvotes: 2

Salmin Skenderovic
Salmin Skenderovic

Reputation: 1720

Without chaning the html-structure:

   $('#what-we-do .container .row div').on('click', function() {
      for (var i = 1; i <= 6; i++) {
        $(this).find($('.what-we-do-text' + i)).animate({
            height: "toggle",
            opacity: "toggle"
        }, 200);
      } 
   });

http://codepen.io/anon/pen/YyJvEV

Upvotes: 0

Rens Tillmann
Rens Tillmann

Reputation: 861

Something like this:

jQuery(document).ready(function($){
    $('#what-we-do .row > div').on('click', function(){
        var $this = $(this);
        var $content = $this.children('p');
        if(!$this.hasClass('toggled'){
            $('#what-we-do .row > .toggled > p').slideUp();
            $('#what-we-do .row > .toggled').removeClass('toggled');

            $this.addClass('toggled');
            $content.slideDown();

        }else{
            $this.removeClass('toggled');
            $content.slideUp();
        }
    });
});

Please note I have not tested it but it should work this way.

Upvotes: 0

Related Questions