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 :)

You wanted to use jQuery right for the animation? Or just pure CSS3? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented May 17, 2013 at 3:53

Praveen Kumar Purushothaman · Accepted Answer · 2013-05-17 04:00:29Z

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!

edited May 17, 2013 at 4:00

answered May 17, 2013 at 3:54

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

djames Over a year ago

excuse me for being so dumb... but this is going to create a full page dropdown right? so when i click it it will be a class like width: 100%; height 300px; for example?

Praveen Kumar Purushothaman Over a year ago

Yup. That's possible buddy. What's your issue, as there won't be any problem.

djames Over a year ago

I'm having as issue with your code. does the div have to be placed inside the link i want to trigger the jquery? I need the div outside the header tag. Any ideas?

Praveen Kumar Purushothaman Over a year ago

Not inside the link, but inside the LI.

tonymx227 · Accepted Answer · 2013-05-17 03:56:41Z

0

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');
});

answered May 17, 2013 at 3:56

tonymx227

5,46317 gold badges54 silver badges97 bronze badges

1 Comment

gillyspy Over a year ago

i suggest to take a look at hover() if considering this

rishikesh tadaka · Accepted Answer · 2013-05-17 03:59:26Z

0

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.........

answered May 17, 2013 at 3:59

rishikesh tadaka

4831 gold badge6 silver badges18 bronze badges

1 Comment

djames Over a year ago

would this allow transitions?

gillyspy · Accepted Answer · 2013-05-17 04:14:09Z

0

Use toggleClass()

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

or slideToggle()

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

edited May 17, 2013 at 4:14

answered May 17, 2013 at 4:02

gillyspy

1,6089 silver badges14 bronze badges

5 Comments

Praveen Kumar Purushothaman Over a year ago

This might give undesired effect in this usecase!

gillyspy Over a year ago

please explain further @PraveenKumar

Praveen Kumar Purushothaman Over a year ago

toggleClass() say if the user or browser, by mistake sets twice, like hide and show same time, think of the effects.

gillyspy Over a year ago

yes if you write other bad code that undermines your good code that is bad. who is doing that?

Praveen Kumar Purushothaman Over a year ago

Yes, you are right, agree with you. Just for a precaution I said. Anything wrong? :P

Collectives™ on Stack Overflow

how to change a css class onclick?

4 Answers 4

4 Comments

1 Comment

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related