Question

i have a div which when clicked has another div underneath it slide up through a toggle and it can slide down if you click again. What ialso wanted to do is to add an :active state to the div button, so that it changes image when the opening div is toggled, however when you click on the div button you get a quick flash of the active state image and then it goes back to the default. For some reason the :active state is not sticking and i can’t find why.

Here is the javascript

    $(function()
{

    $(".server_status_button").click(function(event) {
        event.preventDefault();

        if($(".server_status_button").is(":visible").length > 0){

            $(this).removeClass("active");
        }
        else{

            $(this).addClass("active");
        }
        $("#status1").slideToggle();


    });

    $("#status1").click(function(event) {
        event.preventDefault();
        $("#status1").slideToggle();
    });

});

And here is the html for the whole thing

 <div id="server_status">
            <div class="server_status_button"></div><!---end server_status_button--->
            <div id="status1">
                <div class="status1_content" style="margin-bottom: 5px;">You are on:</div><!---end status1_content--->
                <div class="status1_content" style="font-size:12px;"><span style="font-weight: bold; font-color: #222;">Alnitak</span> - Status: <span style="color: #090;">Good</span></div><!---end status1_content--->
                <div class="status1_content"><span style="font-weight: bold; margin-bottom: 10px;">1300/10000</span> Players</div><!---end status1_content--->
                <div class="status1_content_link" onclick="location.href='servers.php';">List Servers</div><!---end status1_content--->
            </div><!---end status1--->
        </div><!---end server_status--->

Thanks for any help

Answer 1

:active and adding a class active are 2 very different things. :active is pseudo-class added to an element whilst it is active (whilst the mouse is down). Whereas you are adding a normal css class active. You most likely have some css such as:


.server_status_button:active { ... }


If you change that to:


.server_status_button.active { ... }


then it should work.