CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashutosh Dumiyan
Ashutosh Dumiyan

Reputation: 67

Show/Hide toggle button is not working as expected

I am fairly new to jQuery and I tried to create a show/hide toggle button without using jQuery's toggle function and I can't figure out what's wrong with the following code.

The Hide button hides the paragraph successfully. The hide part is working. It adds a class "show" and removes class "hide" and changes button's text. I used Dev Tools to see this and this part is working but clicking on the button again is not working i.e the show part.

$(document).ready(function() {
  $(".hide").click(function() {
    $(".content").hide();
    $(this).addClass("show");
    $(this).removeClass("hide");
    $(this).text("Show");
  });
  $(".show").click(function() {
    $(".content").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

Upvotes: 1

Views: 1569

Answers (4)

Rory McCrossan
Rory McCrossan

Reputation: 337570

You can use toggle() to easily switch the visible state of an element using a single button. Then you can provide a function to text() to set the text on the button based on its current value. Try this:

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggle();
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>

If you wanted to do this without toggle(), then you could use toggleClass() to switch the state of the hide class, like this:

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggleClass('hide');
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>

Upvotes: 2

touson
touson

Reputation: 154

The click event only works when the element you add it to is built when the DOM is first created. As soon as you change the class name of the button from 'show' to 'hide' this "removes it from the DOM" in an event based sense.

To get the button click event to trigger after you change the class name on the button you must assign the click event using the on() function and the function must be placed on the parent container of the element that will trigger the event. In the example below I have added the on() method to the document object, so all elements within the document that have a class of .hide or .show will inherit these click events. This will also apply to any new elements you create on the fly.

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
    $(document).on('click', ".show", function(){
        $(".content").show();
        $(this).addClass("hide");
        $(this).removeClass("show");
        $(this).text("Hide");
    });
    $(document).on('click', ".hide", function(){
        $(".content").hide();
        $(this).addClass("show");
        $(this).removeClass("hide");
        $(this).text("Show");
    });
</script>

You should also use the toggleClass() method @mplungjan suggests.

Here's the jQuery docs for the on() function https://api.jquery.com/on/

Upvotes: 0

mplungjan
mplungjan

Reputation: 178010

You do not want to change the class - if you do you need to delegate so the event is registered to a static container like document 

$(document).on("click",".hide",function() {

I suggest to toggle instead:

$(document).ready(function() {
  $(".but").on("click",function() {
    $(".content").toggle();
    $(this).text($(this).text()=="Show"?"Hide":"Show");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="but">Hide</button>

Without toggle

$(document).ready(function() {
  $(document).on("click",".hide",function() {
    $(".content").hide();
    $(this).text("Show")
      .removeClass("hide")
      .addClass("show");
  });
  $(document).on("click",".show",function() {
    $(".content").show();
    $(this).text("Hide")
      .removeClass("show")
      .addClass("hide");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

Upvotes: 0

Raul
Raul

Reputation: 1024

$("#show-hide").toggle(function() {
  $(".content").hide();
  $(this).text("Show");
}, function() {
  $(".content").show();
  $(this).text("Hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button id="show-hide">Hide</button>

Upvotes: -1

Related Questions