1

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>

Improve this question

4 Answers 4

Reset to default
2

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>

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

6 Comments

I knew about the toggle function. I wanted to do this without it.
For what reason? It's the most appropriate thing you need to use here. Anything else is redundant.
I am a beginner in JavaScript, I just wanted to try it. That's how you learn isn't it?
Very good point. I've updated the answer to show you an alternative to toggle(), although the former is the better approach.
As other answers have pointed out, I can also attach events using "on()" to solve this but I like this CSS solution also. Thanks Sir.
|
0

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>

Improve this answer

2 Comments

This works, but how? What's the difference besides that you attached the click event using "on"?
I attached the click event to the DOCUMENT not to the button which disappeared from the jQuery when you changed the class
0

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/

Improve this answer

3 Comments

Is this not the same as my second solution?
Thanks for the explanation. Now I know why my code wasn't working.
You're absolutely right @mplungjan, I should have read your response more thoroughly before posting my own.
-1 

$("#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>

Improve this answer

3 Comments

Make a snippet and test it. Your toggle is not what you think it is
sorry, toggle is an animation now in jQuery. I guess the next best thing from my point of view is toggleClass.
Has been for years

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.