The show/hide toggle button is malfunctioning and not functioning properly

Question

The show/hide toggle button is malfunctioning and not functioning properly

I'm still learning jQuery and I attempted to create a show/hide toggle button without relying on jQuery's toggle function. However, I can't seem to identify the issue in the code below.

Although the Hide button successfully hides the paragraph, the 'hide' functionality is working correctly. The class "show" is added while the class "hide" is removed, changing the button text accordingly. Upon inspecting with Dev Tools, this part seems to be functioning as expected. Yet, clicking the button again to show the paragraph doesn't work i.e the 'show' aspect.

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

javascript jquery html css

Answer 1

Answer №1

To easily change the visibility of an element with a single button, you can use the toggle() method. Additionally, you can update the text on the button based on its current value by using the text() function. Give this a try:

$(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 prefer not to use toggle(), another option is to utilize toggleClass() to toggle the presence of the hide class. Here's how you can achieve that:

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

Answer 2

To easily change the visibility of an element with a single button, you can use the toggle() method. Additionally, you can update the text on the button based on its current value by using the text() function. Give this a try:

$(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 prefer not to use toggle(), another option is to utilize toggleClass() to toggle the presence of the hide class. Here's how you can achieve that:

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

Answer 3

Answer №2

It is advisable not to change the class directly. If you do need to make changes, consider delegating the event to a static container like the document.

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

I recommend using the toggle function 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>

Alternatively, without using 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>

Answer 4

It is advisable not to change the class directly. If you do need to make changes, consider delegating the event to a static container like the document.

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

I recommend using the toggle function 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>

Alternatively, without using 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>

Answer 5

Answer №3

When you change the class name of an element from 'show' to 'hide', it essentially removes it from the DOM in terms of event handling. The click event will only work if the element is present when the DOM is first created.

To ensure that the button click event triggers even after changing the class name, you need to use the on() function to assign the click event and place it on the parent container of the triggering element. In the code below, I have applied the on() method to the document object so that all elements with classes .hide or .show inherit these click events, including new dynamically created elements.

<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>

It's also recommended to utilize the toggleClass() method as suggested by @mplungjan for better optimization.

For more information on the on() function in jQuery, refer to the official documentation here.

Answer 6

When you change the class name of an element from 'show' to 'hide', it essentially removes it from the DOM in terms of event handling. The click event will only work if the element is present when the DOM is first created.

To ensure that the button click event triggers even after changing the class name, you need to use the on() function to assign the click event and place it on the parent container of the triggering element. In the code below, I have applied the on() method to the document object so that all elements with classes .hide or .show inherit these click events, including new dynamically created elements.

<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>

It's also recommended to utilize the toggleClass() method as suggested by @mplungjan for better optimization.

For more information on the on() function in jQuery, refer to the official documentation here.

Answer 7

Answer №4

$("#toggle-content").click(function() {
  $(".hidden-content").toggle();
  if($(this).text() === "Hide") {
    $(this).text("Show");
  } else {
    $(this).text("Hide");
  }
});

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

<p class="hidden-content">Click the button to toggle me on and off.</p>
<button id="toggle-content">Hide</button>

Answer 8

$("#toggle-content").click(function() {
  $(".hidden-content").toggle();
  if($(this).text() === "Hide") {
    $(this).text("Show");
  } else {
    $(this).text("Hide");
  }
});

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

<p class="hidden-content">Click the button to toggle me on and off.</p>
<button id="toggle-content">Hide</button>

The show/hide toggle button is malfunctioning and not functioning properly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with AngularJS directive: Isolated scope preventing values from being inserted into template

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

Unable to upload images on Phonegap ios using formdata

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

Exploring Arabic text patterns with regex and jQuery

Exploring a JavaScript object's array

Is it possible to pass a mongoDB object to all prototype functions in JavaScript/Node.js?

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

displaying a collection of images from a designated tag on a flickr gallery

Is there a way to find the TextArea element on Facebook's home page using a Selenium locator? Could it possibly be using jQuery

Incorporating external json information into an HTML form

The attribute 'checked' is not a valid property for the 'TElement' type

Refresh Entity with Real-Time Data on Cesium

Updating JSON data using fetch API

What is the best way to choose distinct items from a Promise<Array[]> in Angular 2/4?

Upcoming: Error in syntax: Unexpected character encountered, expected a "}"

Determine if a mobile application has been installed using Vue.js

Struggling to execute a basic Typescript file

The React component does not trigger a re-render