How to Create a Toggle to Show/Hide Divs in jQuery ?
Last Updated :
23 Jul, 2025
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.
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to create canvas of the same
size as a div in a grid?
</title>
<style>
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
height: 100%;
width: 100%;
text-align: center;
}
.toggle-outer{
height: 20px;
width: 50px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #f4f4f4;
margin: auto;
position: relative;
transition: all 0.3s ease-in;
cursor: pointer;
}
.toggle-outer.checked{
background-color: blue;
}
.toggle-inner{
height: 18px;
width: 18px;
border-radius: 50%;
position: absolute;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
transition: all 0.3s ease-in;
}
.toggle-outer.checked .toggle-inner{
left: 30px;
}
input[type="checkbox"]{
display: none;
}
#toggleLabel{
cursor: pointer;
}
#result{
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Toggle the div element by clicking the below
toggle button.
</h3>
<div class="toggle-outer">
<div class="toggle-inner">
<input type="checkbox" id="toggle">
</div>
</div>
<label id="toggleLabel" for="toggle">
ON
</label>
<div id="result">
<h3>
This is the div that toggles on click <br/>
to the above toggle button.
</h3>
</div>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
$('.toggle-outer').click(function(){
$(this).toggleClass('checked');
const res = $('#result');
if(res.css('display') === 'none'){
res.show(300);
$('#toggle').attr('checked', true);
$('#toggleLabel').text('OFF');
}
else{
res.hide(300);
$('#toggle').attr('checked', false);
$('#toggleLabel').text('ON')
}
})
});
</script>
</body>
</html>
Output:
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to create canvas of the same
size as a div in a grid?
</title>
<style>
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
height: 100%;
width: 100%;
text-align: center;
}
.toggle-outer{
height: 20px;
width: 50px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #f4f4f4;
margin: auto;
position: relative;
transition: all 0.3s ease-in;
cursor: pointer;
}
.toggle-outer.checked{
background-color: blue;
}
.toggle-inner{
height: 18px;
width: 18px;
border-radius: 50%;
position: absolute;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
transition: all 0.3s ease-in;
}
.toggle-outer.checked .toggle-inner{
left: 30px;
}
input[type="checkbox"]{
display: none;
}
#toggleLabel{
cursor: pointer;
}
#result{
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Toggle the div element by clicking the below
toggle button.
</h3>
<div class="toggle-outer">
<div class="toggle-inner">
<input type="checkbox" id="toggle">
</div>
</div>
<label id="toggleLabel" for="toggle">
ON
</label>
<div id="result">
<h3>
This is the div that toggles on click <br/>
to the above toggle button.
</h3>
</div>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
$('.toggle-outer').click(function(){
$(this).toggleClass('checked');
const res = $('#result');
if(res.css('display') === 'none'){
$('#toggle').attr('checked', true);
$('#toggleLabel').text('OFF');
}
else{
$('#toggle').attr('checked', false);
$('#toggleLabel').text('ON')
}
res.toggle();
})
});
</script>
</body>
</html>
Output:
Using the css() method
The css() method be used to hide and show a div by passing the display property with block and none values as parameters according to the current condition.
Syntax:
$('elemen_selector').css('display', 'none');
$('elemen_selector').css('display', 'block');Example: The below code example implements the css() method to toggle the div element through toggle button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to create canvas of the same
size as a div in a grid?
</title>
<style>
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
height: 100%;
width: 100%;
text-align: center;
}
.toggle-outer{
height: 20px;
width: 50px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #f4f4f4;
margin: auto;
position: relative;
transition: all 0.3s ease-in;
cursor: pointer;
}
.toggle-outer.checked{
background-color: blue;
}
.toggle-inner{
height: 18px;
width: 18px;
border-radius: 50%;
position: absolute;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
transition: all 0.3s ease-in;
}
.toggle-outer.checked .toggle-inner{
left: 30px;
}
input[type="checkbox"]{
display: none;
}
#toggleLabel{
cursor: pointer;
}
#result{
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Toggle the div element by clicking the below
toggle button.
</h3>
<div class="toggle-outer">
<div class="toggle-inner">
<input type="checkbox" id="toggle">
</div>
</div>
<label id="toggleLabel" for="toggle">
ON
</label>
<div id="result">
<h3>
This is the div that toggles on click <br/>
to the above toggle button.
</h3>
</div>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
$('.toggle-outer').click(function(){
$(this).toggleClass('checked');
const res = $('#result');
if(res.css('display') === 'none'){
$('#toggle').attr('checked', true);
$('#toggleLabel').text('OFF');
res.css('display', 'block');
}
else{
$('#toggle').attr('checked', false);
$('#toggleLabel').text('ON');
res.css('display', 'none');
}
})
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing