jQuery Click Function仅工作一次

Question

I'm trying to use jQuery click method to show and hide a part of my sections after clicking on a certain part of the page .

My HTML code:

<section class="apply_section text-center center-block" id="apply_section">
      <div class="apply_container">

        <div class="container">
          <div class="row apply_row">

            <div class="col-md-8 apply_form">
              <form class="form" action="mail.php" method="POST">
               <div class="col-md-6">
                  <div class="form-group">
                    <input class="form-control" type="text" placeholder="" required="required" name="firstName">
                  </div>

                <div class="col-md-6">
                  <form class="form">
                    <div class="form-group">
                      <textarea class="form-control" placeholder="" required="required" name="message"></textarea>
                    </div>
                  </form>
                  <input class="btn btn-success btn-block" type="submit" value=""></input>
                </div>

              </form>
            </div>

            <div class="col-md-4 apply_image">
              <a><img src="images/icon.png" alt=""></a>
            </div>

          </div>
        </div>

      </div>

    </section>

The jQuery script :

$('#apply_section .apply_image a').click(function(){
  if($('#apply_section .apply_form').css('display','none')) {
    $('#apply_section .apply_form').css('display','inline-block');
  }else {$('#apply_section .apply_form').css('display','none');}
});

The problem is that the clicking method take the order just for one time, If I click on the image the form will appear, but after that if I need to hide it again and clicking the image doesn't work!

Answer 1

That's not how you check css property.

$('#apply_section .apply_image a').click(function() {
  if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none'
    $('#apply_section .apply_form').css('display', 'inline-block');
  } else {
    $('#apply_section .apply_form').css('display', 'none');
  }
});

Answer 2

Another way using toggle:

 $('#apply_section .apply_image a').click(function() {
     var boolean = $('#apply_section .apply_form').css('display') == 'none';
      $('#apply_section .apply_form').toggle(boolean)
 });   

According to Jquery toggle docs: The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Answer 3

A better way to do something like that is using a toggle to a class:

CSS

.hide {
    display:none; 
}

jQuery

$('#apply_section .apply_image a').click(function(){
        $('#apply_section .apply_form').toggleClass('hide');
});

Answer 4

Simplify your code using toggle():

$('#apply_section .apply_image a').click(function(){
    $('#apply_section .apply_form').toggle();
});