Onclick show div hide all others jquery

A toggle button acts like a switch to hide and show the HTML elements.

Hide div class css

Hide div class css

How to hide a div

Css show/hide div on click

How to hide one div and show another

Html hide div by default

If a toggle button is ON, it will show the div element. Otherwise, it will hide the element just like a switch, if it gets ON the supply will start, otherwise, it stops the supply. We can use the below approaches to create a toggle button in jQuery.

Using the hide() and show() methods

The hide() and show() methods are respectively used to hide and show an HTML element.

We will use these methods to toggle the div element in jQuery.

Syntax:

$('element_selector').show();
$('element_selector').hide();

Example: The below code example is a practical implementation of the hide and show methods to create a toggle button to toggle a div.

Output:

Using the toggle() method

We can use the toggle() method of jQuery to hide and show the div element.

Syntax:

$('element_selector').toggle();

Example: The below code example uses the toggle method to create a toggle button to toggle div element.

Output:

Using the css() method

The