Fonction Hide/Show

Test de fonction HideShow 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 param_title="Présentation Standard" class="HideShow" style="display: none;">
  <p>Contenu "Standard"
  </p>
</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 param_title="Présentation Avancée" class="HideShow" style="display: none;">
  <p>
    Contenu "Avancé"
  </p>
</div>

CSS

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

JavaScript

(function($) {
  jQuery.fn.HideShow = function() {
    $(this).each(function() {
      var $This = $(this),
        ExistingHtml = $This.html(),
        oAfficher = 'Afficher ' + $This.attr('param_title'),
        InputHtml = '<input class="show" type="button" value="' + oAfficher + '" />',
        oMasquer = 'Masquer ' + $This.attr('param_title');

      $This.html(InputHtml + '<div class="HideShowDiv"><div class="HideShow" style="display: none;">' + ExistingHtml + '<br />' + InputHtml + '</div></div>').show(0);
      $This.on('click', function() {
        var $Rthis = $(this),
          oSpoiler = $Rthis.find('.HideShow'),
          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() {
  $('.HideShow').HideShow();
});