Fonction Spoiler

Test de fonction Spoiler avec jQuery

by Super_baloo8

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae gravida ligula. Donec dapibus a sem ut suscipit. Sed commodo non ex ut aliquet. Morbi viverra sem luctus nunc faucibus lobortis. Sed arcu lorem, congue at justo vel, maximus faucibus ante. Ut at congue erat. Ut dignissim purus lacus, eget maximus mauris iaculis vel. Nunc blandit ex at lorem ullamcorper, eu varius ligula cursus. Vestibulum placerat sit amet lacus pulvinar tincidunt. Aenean condimentum nibh sed scelerisque rhoncus. Nulla vitae mattis magna. 
</p>
<div class="spoiler" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam mauris, bibendum vel lacus eget, efficitur facilisis nibh. Pellentesque nec.</div> 
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae gravida ligula. Donec dapibus a sem ut suscipit. Sed commodo non ex ut aliquet. Morbi viverra sem luctus nunc faucibus lobortis. Sed arcu lorem, congue at justo vel, maximus faucibus ante. Ut at congue erat. Ut dignissim purus lacus, eget maximus mauris iaculis vel. Nunc blandit ex at lorem ullamcorper, eu varius ligula cursus. Vestibulum placerat sit amet lacus pulvinar tincidunt. Aenean condimentum nibh sed scelerisque rhoncus. Nulla vitae mattis magna. 
</p>
<div class="spoiler" style="display: none;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus in lorem id vestibulum. Aliquam in ultricies justo. Vestibulum lobortis velit id fermentum tempor. Sed convallis vehicula nibh quis convallis. Phasellus nec erat arcu. Cras at lorem iaculis, dapibus metus nec, porta justo. In a nunc porta, convallis metus id, placerat libero. Nunc nulla nunc, sollicitudin ut urna sed, efficitur bibendum mi. Integer egestas ut ligula faucibus ornare. Etiam sed tellus nisl. Nam ut est viverra, ullamcorper nunc eget, suscipit tellus. Suspendisse erat sem, suscipit et ultrices et, dictum sit amet ipsum. Sed tincidunt rhoncus nibh, sed fringilla ipsum. Aliquam...

CSS

.spoilerDiv {
  display:block;
  border:2px solid #000;
  padding:5px;
  width:80%;
}

JavaScript

(function($) {
	jQuery.fn.Spoiler = function()
		{
		$(this).each(function()
			{
			var $This = $(this),
			ExistingHtml = $This.html(),
			oAfficher = 'Afficher Spoiler',
      InputHtml = '<input class="show" type="button" value="'+oAfficher+'" />',
			oMasquer = 'Masquer Spoiler';
			
			$This.html(InputHtml+'<div class="spoilerDiv"><div class="spoiler" style="display: none;">'+ExistingHtml+'<br />'+InputHtml+'</div></div>').show(0);
			$This.on('click', function()
				{
				var $Rthis = $(this),
				oSpoiler = $Rthis.find('.spoiler'),
				oParent = $Rthis.parent('div'),
				oInput = $Rthis.find('.show');
				if(oSpoiler.is(':visible'))
					{
          oInput.prop('disabled', true);
					oSpoiler.slideUp(500, function()
                          {
            	oInput.val(oAfficher).prop('disabled', false);
          });
					}
					else
						{
               oInput.prop('disabled', true);
						oSpoiler.slideDown(500, function()
                          {
            	oInput.val(oMasquer).prop('disabled', false);;
          });
						}
				});
			});
		return $This;
		}
})(jQuery);
$(document).ready(function() {
  $('.spoiler').Spoiler();
});