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>Inbox</p>
	<p>Sent Mail</p>
	<p>Drafts</p>
	<div id="more-option">
		<p>Chat</p>
		<p>Spam</p>
		<p>Trash</p>
	</div>
</div>

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')) {
		$("#more").hide();
		$("#less").show();
	 } else {
		$("#less").hide();
		$("#more").show();
	 }
	$("#more-option").slideToggle();
}

View DemoDownload