CODEWITHSUNDEEP
jqueryslidetoggle
davidz
davidz

Reputation: 277

Implementing slideToggle in jQuery

I'm a newbie with jQuery and I'm trying to figure out this slideToggle function. How I want it to work is when you click on let's say #toolsnav the #tool-dropdown div slides down, which works perfect. But the problem is that the #tools-dropdown div doesn't go up when I click on the other nav divs, it stays down unless I click on it again. Thanks of your help : )

    <script type="text/javascript">
    $(document).ready(function() {
        $("#toolsnav").click(function() {
            $(".tools-dropdown").slideToggle("fast");              
        }); 
        $("#showsnav").click(function() {
            $(".shows-dropdown").slideToggle("fast");              
        });
        $("#blognav").click(function() {
            $(".blog-dropdown").slideToggle("fast");              
        }); 
        $("#aboutnav").click(function() {
            $(".about-dropdown").slideToggle("fast");              
        });
        $("#joinnav").click(function() {
            $(".join-dropdown").slideToggle("fast");              
        });     
});  
</script> 

                <nav id="main">
                <ul>
                    <li><a href="#" id="toolsnav">Tools</a></li>
                    <li><a href="#" id="showsnav">Shows</a></li>
                    <li><a href="#" id="blognav">Blog</a></li>
                    <li><a href="#" id="aboutnav">About</a></li>
                    <li><a href="#" id="joinnav">Join</a></li>              
                </ul>           
            </nav>

Upvotes: 0

Views: 1098

Answers (3)

adeneo
adeneo

Reputation: 318342

$(document).ready(function() {
    $("#toolsnav, #showsnav, #blognav, #aboutnav, #joinnav").on('click', function() {
        $('[class$="-dropdown"]').not('.'+this.id.replace('nav','')+'-dropdown').slideUp();
        $('.'+this.id.replace('nav','')+'-dropdown').slideToggle();
    });
});

FIDDLE

To change the color of the links when they are active you could use jQuery's css() method, or just use a class, like so:

$(this).toggleClass('active').parent().siblings().children('a').removeClass('active');

It would be easier to target all the links if they all had the same class, but the above method should work just fine as well.

Upvotes: 2

user899205
user899205

Reputation:

One simple solution is to save previous clicked slide and toggle it too.

<script type="text/javascript">
$(document).ready(function() {
    var prevSlide;

        $("#toolsnav").click(slideFunc(".tools-dropdown")); 
        $("#showsnav").click(slideFunc(".shows-dropdown"));
        $("#blognav").click(slideFunc(".blog-dropdown"));
        $("#aboutnav").click(slideFunc(".about-dropdown"));
        $("#joinnav").click(slideFunc(".join-dropdown")); 

    function slideFunc(target)
    {
        return function()
        {
            if(prevSlide && target != prevSlide)
                $(prevSlide).slideToggle("fast");
            else
                prevSlide = null;

            $(target).slideToggle("fast");
            prevSlide = target;
        }
    }
});  
</script> 

<nav id="main">
    <ul>
        <li><a href="#" id="toolsnav">Tools</a></li>
        <li><a href="#" id="showsnav">Shows</a></li>
        <li><a href="#" id="blognav">Blog</a></li>
        <li><a href="#" id="aboutnav">About</a></li>
        <li><a href="#" id="joinnav">Join</a></li>              
    </ul>           
</nav>

Upvotes: 0

Андрей Петров
Андрей Петров

Reputation: 149

$(document).ready(function() {
    $('#main ul li a').click(function(){
        var dropdown = $(this).attr('id').split('nav');
        $('.' + dropdown [0] + '-dropdown').slideToggle('fast'); 
    });
})

That's all :-)

Upvotes: 0

Related Questions