CODEWITHSUNDEEP
javascriptjqueryhtml
NewBoy
NewBoy

Reputation: 1144

jquery toggle() adding and removing a class

I have created a simple jQuery toggle function which adds and removes the class formVisablethe toggle function is adding the class how in the wrong place CLICK HERE.

I want to add the class to the following element <div id="hide-overlay"> however at the moment the class is being added to my button element <a id="show-form">. Below is a snippet of my code

HTML 

<div class="row promo-image responsive">
        <figure>
            <figcaption class="caption">
                <a id="show-form" class="promo-button" href="#">
                    <span>Be More Productive</span>
                    <i class="fa fa-download"></i>  
                </a>
                <h4>Download the 8 steps for successful collabration</h4>
            </figcaption>
        </figure>
    </div>

HIDDEN ELEMENT

<div id="hide-overlay">
    <a id="hide-form-close" href=""><i class="fa fa-times fa-2x"></i></a>

    <div class="col-sm-6 col-sm-offset-3 form-container">
        <h2 class="business">Register</h2>
       <form class="main-contact submit-fade ajax-form" action="process.php" method="POST">
            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  <input type="text" class="form-control" name="name" placeholder="Name" required>
                </li>

                <li>
                  <label for="email">Email</label>
                  <input type="text" class="form-control" name="email" placeholder="Email">
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">
        </form>
    </div>
  </div>

JQUERY 

var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").on("click", function(e){
   $(this).toggleClass("formVisable");
});

Upvotes: 0

Views: 2772

Answers (4)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

The $(this) inside a JQuery event handler is the DOM element that has the handler attached. If we attached the handler to something else, like the containing <div>, we will get the DIV DOM element doesn't matter which inside elements of the DIV we clicked.

So, in this case you would need something like this, since $("#hideOverlay") is already cached, the correct way to do it is:

var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").click(function(e){
    $hideOverlay.toggleClass("formVisible");
    //Prevent default behavior for links and buttons
    e.preventDefault();
});

Upvotes: 0

Alexander Dixon
Alexander Dixon

Reputation: 874

You did not properlay declare the variable. You had $(#hideOverlay) when your HTML id attribute was actually id='hide-overlay'. As such, I have re-written the jQuery to properly target and hide the form as was your original intent. I also, disabled the link so that it will only do the show/hide function and not the go to href='#' action.

As the other answers suggest, when using the $(this) selector in jQuery, it will target the parent selector of the current iteration of the function.

I also updated your CSS as it was hiding the form.

View working example

var $hideOverlay = $("div#hide-overlay");
$hideOverlay.toggle();
$hideOverlay.css("border", "solid 1px black");
  $("a#show-form").on("click", function(e){
    e.preventDefault();
    $hideOverlay.slideToggle(300);
  });

Upvotes: 0

Jacob Reisner
Jacob Reisner

Reputation: 162

"This" represents the object that an action is being applied to. In this case, it's your button. You want the class to be applied to your overlay, rather than to the button. Therefore, try this:

Also, you had some spelling errors.

$("#hide-overlay").hide()
$("#show-form").on("click", function(e){
  $("#hide-overlay").toggleClass("formVisible");
});

WORKING DEMO HERE

Upvotes: 0

Lucian
Lucian

Reputation: 644

It's because you are using this which represents the object that is calling the function, in this case #show-form. You should use $('#hide-overlay').toggleClass("formVisible");

Here's the fiddle for it: http://jsfiddle.net/norg5k2o/4/

Upvotes: 3

Related Questions