I have the following code:

function showAccessRequests_click() {
    var buttonValue = $("#showAccessRequests").val();
    if (buttonValue == "Show") {
        $(".hideAccessRequest").removeClass("hideAccessRequest");
        $("#showAccessRequests").val("Hide");
    }
    else {
        $(".hideAccessRequest").addClass("hideAccessRequest");
        $("#showAccessRequests").val("Show");
    }
}

This script removes a class fine but it does not want to add the class. Can you see any issues with this code?

I have the following code:

function showAccessRequests_click() {
    var buttonValue = $("#showAccessRequests").val();
    if (buttonValue == "Show") {
        $(".hideAccessRequest").removeClass("hideAccessRequest");
        $("#showAccessRequests").val("Hide");
    }
    else {
        $(".hideAccessRequest").addClass("hideAccessRequest");
        $("#showAccessRequests").val("Show");
    }
}

This script removes a class fine but it does not want to add the class. Can you see any issues with this code?

• javascript
• jquery

3 Answers 3

When you add hideAccessRequest class to the element, you search for it by the existence of that class.. if you are adding it, that class won't already be applied and thus you won't match any elements.

$(".hideAccessRequest") doesn't exist. you need to use id, I guess. And you might want to look at toggleClass.

you'd need an identifier for the classes you want to toggle ex:"accessRequest"... try this.

function showAccessRequests_click() {
    var buttonValue = $("#showAccessRequests").val();
    if (buttonValue == "Show") {
        $(".accessRequest").removeClass("hideAccessRequest");
        $("#showAccessRequests").val("Hide");
    }
    else {
        $(".accessRequest").addClass("hideAccessRequest");
        $("#showAccessRequests").val("Show");
    }
}

classes are space-delimited, so if you want them hidden by default...

<div class="accessRequest hideAccessRequest">...</div>