Toggle HTML with jQuery

In this tutorial, we are going to see how to toggle HTML text element using jQuery. In the previous tutorial, we have seen horizontal expand/collapse with jQuery toggle().

In this example, we have shown the list of limited mail options in a left menu with more/less button. On the click event of this button, we are showing/hiding more options with the toggle effect.

View Demo


HTML Menu for Toggling

This code shows the list of HTML menu items with more/less button to toggle.

<div id="option-list">
	<p>Write Mail</p>
	<p>Sent Mail</p>
	<div id="more-option">

jQuery Toggle to Show/Hide Menu Options

This jQuery script is used to hide and show menu options with toggle effect.

function toggleText() {
     if(!$("#more-option").is(':visible')) {
	 } else {

View DemoDownload

This jQuery code tutorial was published on March 17, 2015.

↑ Back to Top