CODEWITHSUNDEEP
jqueryslidetogglenav
Carsten Løvbo Andersen
Carsten Løvbo Andersen

Reputation: 27051

Nav bar using slidetoggle

I have a Nav bar with a Login and Sign up. When i click on the a(also called the Trigger) the slide up and down but i dont hide the other "tab"

If i click the A("#login-trigger) i would like it to hide my Signup page if. and the other way around ofc with the signup-trigger.

i would be so happy if someone could help me since i have been trying for a few hours now, including trying some codes from here.

This is my entire Jquery script

$(document).ready(function () {
    $('#login-trigger').click(function () {
        $(this).next('#login-content').slideToggle();
        if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼');
    })
    $('#signup-trigger').click(function () {
        $(this).next('#signup-content').slideToggle();
        if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼');
    });
});

Thanks

Upvotes: 0

Views: 702

Answers (1)

Stuart Kershaw
Stuart Kershaw

Reputation: 17701

Are you wanting something like this? This toggles the clicked item but slides up the alternate.

http://jsfiddle.net/8A4T7/1/

$(document).ready(function () {
    $('#login-trigger').click(function () {
        $('#login-content').slideToggle();
        $('#signup-content').slideUp();
        if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼');
    })
    $('#signup-trigger').click(function () {
        $('#login-content').slideUp();
        $('#signup-content').slideToggle();
        if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼');
    });
});

Upvotes: 1

Related Questions