Add/remove class on button click

Question

Problems with JavaScript add/remove class on button click. It just won't perform the function.

Read through a number of stack overflow solutions, none worked for this particular situation.

These are the elements:

// CSS 

.hideWelcome{
    display: none;
}

.autoHide {
    display: none;
}

// JavaScript Hide Welcome

  $(document).ready(function() {    
      $("#showFormBtn").live("click", function() {
        $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome");
        $("#formInput").toggleClass("autoHide");
    });
 });


    // Welcome Div

    <div class="container">
        <div class="row">
            <div id="WelcomeDiv" class="one-half column fadeInUp animated" style="margin-top: 25%">
                <h4>Make a Difference</h4>
                <p>Volunteer today!</p>
                <div class="bounceIn animated">
                <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/>
                </div>
            </div>

    // Div to show

            <div id="formInput" class="one-half column fadeInUp animated autoHide" style="margin-top: 25%">
                <h4>HELLO YA'LL</h4>
                <p>Howdy!</p>
                <div class="bounceIn animated">
                    <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/>
                </div>
            </div>
        </div>
    </div>

Glad the solution worked. Would you mind accepting this answer? It might help people experiencing a similar issue and will help getting your question noticed — shu
– shu, Commented Feb 10, 2016 at 4:33

Rayon · Accepted Answer · 2016-02-10 04:33:52Z

1

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Try this:

$("#showFormBtn").on("click", function() {
  $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome");
  $("#formInput").toggleClass("autoHide");
});

edited Feb 10, 2016 at 4:33

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

answered Feb 10, 2016 at 4:22

shu

1,95612 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Add/remove class on button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related