响应按钮单击显示和隐藏文本

Question

The code below does this. When I click the button for the first time, it shows the respective text. And when I click the same button again, it fades out and fades in. However, I want the respective text to disappear if the button is clicked the second time instead of fading out and then fading in.

$(document).ready(function(){
    $('.info').click(function(){
        $(this).next().fadeOut("slow");
    $(this).next().fadeIn("slow");
    });
});

HTML:

    <div>
        <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
        <h1 class="infoText" style="display:none">text 1</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 2</a>
        <h1 class="infoText" style="display:none">text 2</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 3</a>
        <h1 class="infoText" style="display:none">text 3</h1>
    </div>

It should start like this:

header1

header2

header3

When I click header1, it should be like this:

header1

text1

header2

header3

And when I click header 1 again, it should be like this:

header1

header2

header3

Anybody know how to do this?

Answer 1

You can use fadeToggle() to toggle the display with fade effect

 $(document).ready(function() { $('.info').click(function() { $(this).next().fadeToggle("slow"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a> <h1 class="infoText" style="display:none">text 1</h1> </div> <div> <a class="info" href="javascript:void(0);">header 2</a> <h1 class="infoText" style="display:none">text 2</h1> </div> <div> <a class="info" href="javascript:void(0);">header 3</a> <h1 class="infoText" style="display:none">text 3</h1> </div>

Answer 2

You can use toggle() for this purpose. It will hide the element if it is already shown, otherwise it will shows the element.

$('.info').click(function(){
     $(this).next().toggle("slow");
 });

Answer 3

$('.info').click(function(){
    //$(this).next().fadeOut("slow");
    $(this).next().toggle("slow");
});

Use toggle to hide and show something

AS per suggestion of @Tushar

$('.info').click(function(){
    //$(this).next().fadeOut("slow");
    $(this).next().fadeToggle("slow");
});

Answer 4

You can use toggle() Function:

$(document).ready(function() {
  $('.info').click(function() {
    $(this).next().fadeToggle("slow");
  });
});

DEMO

Answer 5

You Try this code

$(document).ready(function() {
  $('.info').click(function() {
      var _self = $(this);

      if(_self.hasClass("active")) {
          _self.next().fadeOut("slow");
         _self.removeClass("active");
      } else {
           _self.next().fadeIn("slow");         
          _self.addClass("active");
      }

  });
});

Working Demo