How would you add an active class to the span class link using jquery

Question

I copied this script for a pop open box to use for some content on my personal website. No understanding JS , i was wanting to know if it's possible to add an "active" class to the span class i have labled MANAGE , so i can style it when the content is open. I have tried to use :active in my css but its not working, so i assume its needs added to this script.

<div id="login_buttons">
<span id="loginlink" class="readmore_jq">MANAGE</span><div class="hide1"><module name="MESSAGE2"/></div>
</div>


<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $('.hide1').hide();
    $('.readmore_jq').click(function(){
        var t = $(this);
        t.next().toggle('slow');
    });
});
// ]]></script>

EDITED: i set up in jsfiddle to try all the answers, and still nothing working to get normal and active state http://jsfiddle.net/dEcFL/5/

Answer 1

you can use toggleClass() to toggle a class on the clicked element :

$(document).ready(function(){
    $('.hide1').hide();
    $('.readmore_jq').on('click', function(){
        $(this).toggleClass('active').next().toggle('slow');
    });
});

FIDDLE

Answer 2

Since you are using jquery, I think you can try the following code

$('#loginlink').addClass('active');

besides, there is also a removeClass function.

Hope helps!

Answer 3

You can just add a change to the CSS through jQuery after you click it. This is an example after the click it will change the text to red works in your js fiddle. That should get you on the right path.

$(document).ready(function(){
    $('.hide1').hide();
    $('.readmore_jq').click(function(){
        var t = $(this);
        t.next().toggle('slow');
        $( this ).css( "color", "red" );
    });
});

Answer 4

$( "span#loginlink" ).addClass( "active" );

Answer 5

So you want to find whatever span has the word MANAGE and add an active class to it?

Try this jQuery:

$('span').each(function(){
    if($(this).html() == 'MANAGE')
        $(this).toggleClass('active')
});

Answer 6

All of the below answers are correct: you can add or remove a class using:

$('selector').addClass('class');

or

$('selector').removeClass('class');

or even

$('selector').toggleClass('class');

See this heavily-upvoted post for more info and please try to search before asking in the future.