how to change a css class onclick?

Question

I have a navigation bar. I would like to set it up so that when the user clicks the departments tab, a css div will slide down and reveal some content. I would like to set this up with 2 pseudo classes. for example

dropdown.hide, .dropdown.show". dropdown.hide

will be positioned above the header and slide down (with a css transition) it will transform into the new class (.show) when the user clicks the departments tab. any ideas on how to pull this off?

Here's my current code . (excuse the glitch edges)

Thanks in advance :)

Answer 1

You can use a mix of jQuery (for changing class) and CSS3 (for transition). So, you have your CSS well set, and make sure you set these two params:

.dropdown.show {transition: all 2s ease;}
.dropdown.hide {transition: all 2s ease;}

Now for the jQuery part, we will just be using it to change the class on click.

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

For this, you need to have the .dropdown , positioned next to the links. This gets attached to the click event handler. If you want it on :hover , you can use this code:

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

If you are planning for different sub-menus for each menu item, you need to add them next to the <a href...>...</a> tag inside the nav > ul > li . A sample code would be:

<div class="wrapper">
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
                <div class="dropdown hide">
                    <!-- Dropdown Menu -->
                </div>
            </li>
        </ul>
    </nav>
</div>

In my opinion, you should not use two classes for the same div . A .hide and .show is not needed. Instead, have just the .hide be default and toggle between .show !

Answer 2

You have to use the Mouseover and Mouseout functions in jQuery. I prefer to use jQuery instead of CSS for this kind of thing...

$('nav').find('a').on('mouseover', function(){
    $('body').append('<div id="divNavBar">Some content</div>');
    $(this).addClass('YourClassName');
}).on('mouseout', function(){
    $('#divNavBar').remove();
    $(this).removeClass('YourClassName');
});

Answer 3

According to my understanding of your question following is the my solution to change the class dynamically.

$(".className").click(function() {
    $(this).addClass("NewClassName");
});

Please correct me if I am wrong.........

Answer 4

Use toggleClass ()

$('div').toggleClass('hide').toggleClass('show');

or slideToggle()

$('div').slideToggle(1000);