jQuery toggle()
Assigning multiple events to run in sequence on the same item
HTML
Click the link below to cycle between 3 states - None, Brief and Full<br>
<a href="#" id="ShowMoreLink">Display Brief Help</a>
<div id="MoreInfo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. c, tempus nec, condimentum ac, tellus. Morbi pellentesque, libero sit amet porta accumsan, dolor orci mollis ipsum, sagittis dictum leo odio eleifend sapien.
<div id="EvenMore">
<br>Morbi facilisis. Quisque vehicula. Morbi gravida quam nec dui. Donec convallis, sem vel luctus scelerisque, diam sapien laoreet tellus, eu condimentum sapien elit ac turpis. Sed eget neque. Nullam at odio. Duis tellus turpis, ultricies consequat, nonummy a, dignissim in, orci.
</div>
</div>
<br>
<hr>
Don't confuse this with the toggle animation method, which hides or displays an element:<br>
<a href="#" id="HideShow">
<div id="infoToggler">
<img src="https://img.icons8.com/metro/26/000000/google-images.png">
<img src="https://img.icons8.com/material-outlined/24/000000/chrome.png" style="display:none"/>
</div>
Toggle Animation</a><br></a>
<span id="HideAndSeek">Peek-a-boo!</span>
<hr>
TExt fdkr#pfö ldgfdkglöfk jfgofik, km,jkuik mjoi,lÖö#pjhgfr ,ökliuzouhn lkifug7un kerjdfcvlk, wedflkfhogrierekor+feülgth,b oi90eirkvg boke3,mdfv cklm, @wsydxfvc bi0oöjl.,s xcf
CSS
body {
background-color: #eef;
}
#MoreInfo{
display: none;
border: 1px solid #888;
padding: 5px;
background: #cacaca;
}
#EvenMore{
display: none;
padding: 0px;
}
#HideAndSeek{
display: none;
}
JavaScript
$("#ShowMoreLink").toggle(function() {
$('#MoreInfo').slideDown(500);
$('#ShowMoreLink').text('Display Full Help');
}, function() {
$('#EvenMore').slideDown(500);
$('#ShowMoreLink').text('Display No Help');
}, function() {
$('#EvenMore, #MoreInfo').slideUp(500);
$('#ShowMoreLink').text('Display Brief Help');
});
if ($('#HideAndSeek').text().length> 5)
{
$("#HideShowSign").show();
}
else
{
$("#HideShowSign").hide();
$("#HideMinusSign").hide();
}
$("#HideShow").click(function() {
textlength = $('#HideAndSeek').text().length;
if (textlength > 5)
{
$('#HideAndSeek').toggle();
}
else
{
alert("nope");
}
});