
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.
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>
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(); }