The jQuery .toggle() method is used to toggle the visibility of selected elements. This tutorial covers different aspects of using the .toggle() method with detailed explanations and examples.
You can use the .toggle() method to toggle the visibility of an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Basic</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="toggleButton">Toggle Paragraph</button>
</body>
</html>
This example shows how to toggle the visibility of a paragraph when a button is clicked using the .toggle() method.
You can specify the duration for the toggle effect, making the transition smoother.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Duration</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle(1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="toggleButton">Toggle Div with Duration</button>
</body>
</html>
This example demonstrates how to toggle the visibility of a div with a specified duration.
You can execute a callback function after the toggle effect is completed.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("p").toggle("slow", function(){
alert("The paragraph is now toggled.");
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="toggleButton">Toggle Paragraph with Callback</button>
</body>
</html>
This example shows how to execute a callback function after toggling the visibility of an element.
You can use different easing functions to change the toggle animation's acceleration.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Easing</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle("slow", "easeOutBounce");
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="toggleButton">Toggle Div with Easing</button>
</body>
</html>
This example demonstrates how to use an easing function with the .toggle() method.
You can toggle the visibility of multiple elements at once by selecting them using a common class or element type.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Multiple Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$(".toggleable").toggle();
});
});
</script>
</head>
<body>
<p class="toggleable">Paragraph 1</p>
<p class="toggleable">Paragraph 2</p>
<p class="toggleable">Paragraph 3</p>
<button id="toggleButton">Toggle All Paragraphs</button>
</body>
</html>
This example shows how to toggle the visibility of multiple paragraphs with a single button click.
The .toggle() method toggles the CSS display property of the selected elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - CSS Display Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("p").toggle();
alert("CSS Display Property: " + $("p").css("display"));
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="toggleButton">Toggle Paragraph</button>
</body>
</html>
This example demonstrates how the .toggle() method affects the CSS display property of an element.
You can specify custom speeds for the toggle effect using predefined speeds or milliseconds.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Custom Speed</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle(1500);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="toggleButton">Toggle Div with Custom Speed</button>
</body>
</html>
This example shows how to toggle the visibility of an element with a custom speed.
You can use the .slideToggle() method to toggle the visibility of elements with a sliding effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideToggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideToggleButton").click(function(){
$("div").slideToggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="slideToggleButton">Toggle Div with Slide Effect</button>
</body>
</html>
This example demonstrates how to toggle the visibility of an element with a sliding effect.
You can use the .fadeToggle() method to toggle the visibility of elements with a fading effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeToggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeToggleButton").click(function(){
$("div").fadeToggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="fadeToggleButton">Toggle Div with Fade Effect</button>
</body>
</html>
This example shows how to toggle the visibility of an element with a fading effect.
You can delay the toggle effect using the .delay() method before toggling the element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .delay() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#delayButton").click(function(){
$("div").delay(2000).toggle(1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="delayButton">Toggle with Delay</button>
</body>
</html>
This example demonstrates how to delay the toggle effect before toggling an element.
You can toggle the visibility of elements when a user hovers over them using the .hover() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hover() Method - Toggle</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("div").hover(function(){
$(this).toggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Hover over this div to toggle it.</div>
</body>
</html>
This example demonstrates how to toggle the visibility of an element when the user hovers over it.
You can toggle the visibility of elements in response to keyboard events such as pressing a specific key.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyboard Event - .toggle()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).keypress(function(e){
if(e.which == 13) { // Enter key
$("div").toggle();
}
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Press Enter to toggle this div.</div>
</body>
</html>
This example shows how to toggle the visibility of an element when a specific key is pressed.
You can toggle the visibility of elements in response to mouse events such as clicking or double-clicking.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Event - .toggle()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).toggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Click on this div to toggle it.</div>
</body>
</html>
This example demonstrates how to toggle the visibility of an element when the user clicks on it.
You can toggle the visibility of elements when a form is submitted.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Submission - .toggle()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
$("div").toggle();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Type something">
<button type="submit">Submit</button>
</form>
<div style="background-color: yellow; padding: 10px;">This div will be toggled on form submission.</div>
</body>
</html>
This example shows how to toggle the visibility of an element when a form is submitted.
You can toggle the visibility of elements when the browser window is resized.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Window Resize - .toggle()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Resize the window to toggle this div.</div>
</body>
</html>
This example demonstrates how to toggle the visibility of an element when the window is resized.
You can toggle the text content of elements using the .toggle() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method - Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
var paragraph = $("p");
if (paragraph.text() === "This is the original text.") {
paragraph.text("This is the toggled text.");
} else {
paragraph.text("This is the original text.");
}
});
});
</script>
</head>
<body>
<p>This is the original text.</p>
<button id="toggleButton">Toggle Text</button>
</body>
</html>
This example shows how to toggle the text content of a paragraph when a button is clicked.
You can toggle classes on elements using the .toggleClass() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggleClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("div").toggleClass("highlight");
});
});
</script>
<style>
.highlight {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div>This is a div element.</div>
<button id="toggleClassButton">Toggle Class</button>
</body>
</html>
This example demonstrates how to toggle classes on a div when a button is clicked.
You can toggle attributes on elements using custom logic with the .attr() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .attr() Method - Toggle Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleAttrButton").click(function(){
var img = $("img");
if (img.attr("alt") === "Original Alt") {
img.attr("alt", "Toggled Alt");
} else {
img.attr("alt", "Original Alt");
}
});
});
</script>
</head>
<body>
<img src="image.jpg" alt="Original Alt">
<button id="toggleAttrButton">Toggle Alt Attribute</button>
</body>
</html>
This example shows how to toggle an attribute on an element when a button is clicked.
You can toggle CSS properties of elements using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Toggle CSS Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleCssButton").click(function(){
var div = $("div");
if (div.css("background-color") === "rgb(255, 255, 0)") {
div.css({"background-color": "blue", "color": "white"});
} else {
div.css({"background-color": "yellow", "color": "black"});
}
});
});
</script>
</head>
<body>
<div style="background-color: yellow; color: black; padding: 10px;">This is a div element.</div>
<button id="toggleCssButton">Toggle CSS Properties</button>
</body>
</html>
This example demonstrates how to toggle CSS properties of a div when a button is clicked.
You can restore the visibility of hidden elements using the .show() or .toggle() methods.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .show() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide();
});
$("#showButton").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="hideButton">Hide Paragraph</button>
<button id="showButton">Show Paragraph</button>
</body>
</html>
This example demonstrates how to restore the visibility of hidden elements using the .show() method.