open-close text

by toubia95

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<span>
<a class="exemples" data-link-text="Exemples" href="#">Exemples</a>
<p class="description">Description Exemples</p></span><br>
<span>
<a class="explications" data-link-text="Explications" href="#">Explications</a>
<p class="description">Description Explications</p>
</span>

JavaScript

$(document).ready(function () {
   $('.description').hide();

	$( '.exemples, .explications' ).on( "click", function() {
    $(this).toggleClass('fermer');
		if($(this).hasClass('fermer')){
			$(this).text('Masquer');
      $(this).parent().find('.description').show();
		} else {
			$(this).text($(this).attr('data-link-text'));
      $(this).parent().find('.description').hide();
		}
	});
});