CODEWITHSUNDEEP
javascriptjquerycsstoggle
Gerico
Gerico

Reputation: 5169

jQuery toggle on dropdown

The problem:

In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.

This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.

jsFiddle:

http://jsfiddle.net/visualdecree/4A23Z/39/

jQuery:

Note: I know it might be messy, I'm still learning this.

$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({width:'toggle'},400);

    $(panID)
    .css({'left' : '139px','overflow':'visible'})
    .stop()
    .animate
    ({ width: "toggle", opacity: "toggle"
    }, { duration: "slow" });

    $(".control-view").hide();  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   

});

$('.sn, .sn-drop').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$('.sn-alt').click(function(e) {
    $('ul.additional li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});


$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});

$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop(true,true)
        .hide({width:'toggle'}, 100);

        $('ul.sidenav li').not(this).removeClass('active');

        $(".control-view").stop().fadeOut("fast");
});



$(".additional").hide(); // Controls for the 'design' dropdown

$(".sn-drop").click(function(){
    $(".additional").slideToggle(300);
    var scrt_var = Math.random();
    return false; //Prevent the browser jump to the link anchor
});

Upvotes: 1

Views: 964

Answers (2)

Aelios
Aelios

Reputation: 12137

Just add this JQuery, when you click on other link in your sidebar, it will close your .additional

$(".sn").click(function(){
    $(".additional").slideUp(300);
    var scrt_var = Math.random();
    return false; //Prevent the browser jump to the link anchor
});
​

Upvotes: 2

Fraser
Fraser

Reputation: 14246

If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:

$('.sn').click(function(){
    $('.additional').slideUp();
})

Upvotes: 0

Related Questions