CODEWITHSUNDEEP
jqueryslide
PlayHardGoPro
PlayHardGoPro

Reputation: 2933

Controlling slideUp and SlideDown

I'm creating an accordion menu with JQuery.
So far I could do it but only with one sublist open at a time and I need to leave as many as I want.

I need to slideUp() only the exactly menu I clicked not all of them...

Here is my Codepen where you can see the code working.

As you can see, when you open one submenu you close all the rest. I know it's because of this line of code: 

$(".prof-list ul").slideUp();

I just can't find a way to do what I want... When I click on the H3 or that specific li tag. How may I close only that exactly one and leave all the rest the way it is (closed / opened).

Upvotes: 0

Views: 63

Answers (3)

Akhil
Akhil

Reputation: 443

Here is a working sample code that you can reuse. here i added ID for parent UL element as list

var pre;
    $(document).ready(function() {

        $("#list").find("ul").hide();

         pre = $("#list").find("ul:first");
        pre.show();

        $("#list").find("h3").each(eachItem);

    });

    eachItem = function(key, val) {

        console.log(val);

        $(val).click(function(e) {



            $(e.target).parent().find("ul").slideDown();
            pre.hide();
            pre = $(e.target).parent().find("ul");

        });

    }

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use slideToggle() for current element,

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Slide up all the elements of the list
        //$(".prof-list ul").slideUp();// comment this
        //Slide down the elements below the H3 clicked - only if closed
        //if(!$(this).next().is(":visible")) // comment this
        {
            $(this).next().slideToggle();// use slideToggle here
        }
    });
});

Demo

Simplified code,

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Toggle only current container's content
        $(this).next().slideToggle();
    });
});

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just keep only one line in your click event as below and remove the rest.

$(".prof-list h3").click(function(){
        $(this).next().slideToggle();
})

Pen here

Upvotes: 1

Related Questions