CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xander
Xander

Reputation: 1011

toggleClass error - Use click event to hide class with jQuery mobile?

In my CSS I have a class called hide which is applied to a textarea. Once clicking a button I would like the class to be removed however at the moment when I click the button there is no change. If I add an alert to the function it triggers when the button is pressed so I'm unsure as to why the class isn't changing. I changed it to removeClass now instead but that doesn't work either unfortunatley.

(Also the textarea stuff in the CSS isn't taking effect if anyone happens to know why, not overly important though)

HTML:

<button id="note1btn" data-role="button">Note #1</button>
<textarea id="note1input" class="hide" rows="10" cols="50"></textarea>

CSS:

#textarea {
    width: 100%;
    height: 100%;
    font: 1em arial;
    color: rgba(50, 82, 50, 1.0);
}

#textarea:focus {
    color: rgba(50, 82, 50, 1.0);
    border: 2px solid #96c56f;
    box-shadow: 0px 1px 1px #888888;
}

.hide {
    visibility: hidden;
    height: 1px !important;
    padding: 0px !important;
    margin: 0px !important;
}

JS:

$(document).ready(function () {
    note1btn.addEventListener("click", displayNote);

//DISPLAY NOTE
    function displayNote() {
        alert("TEST");
        $("note1input").removeClass("hide");
    }

});

Upvotes: 0

Views: 43

Answers (1)

Amarjeet Chahal
Amarjeet Chahal

Reputation: 270

you forgot to add '#' in jquery selector change this

$("note1input").removeClass("hide");

into this

$("#note1input").removeClass("hide");

Upvotes: 2

Related Questions