Show / Hide Div and Toggle html text using jQuery

1. To Show and Hide the text upon clicking the below anchor link
2. To change the link text to ‘Hide Options’ upon clicking the ‘More Options’ anchor link
3. Add and Remove the class ‘opened’ for anchor link upon clicking the anchor link

HTML
<a class="moreOpt" id="roundTrip">More Options</a>
<div style="display:none;" id="more-roundTrip">
More Options Content Goes here....
</div>
jQuery
$('.moreOpt').click(function () {
    $('#more-'+$(this).attr('id')).slideToggle();
	$(this).toggleClass('opened');
	$(this).html() == "More Options" ? $(this).html('Hide Options') : $(this).html('More Options');
});

Author: Raghava

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *


*

'