Onclick show div codepen

A toggle button acts like a switch to hide and show the HTML elements. 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