Blog

Oft braucht man eine kleine Funktion um Elemente auf einer Website ein- und auszublenden. Beispielsweise für Detailinformationen zu einem Video oder Text. Kürzlich habe ich ein kleines Snippet geschrieben um genau solche Aufgaben zu erledigen und das per Data-Attributen flexibel zu konfigurieren ist.

Das javaScript Snippet

function revealSomething(triggerSelector,activeClass) {
  var revealTarget = $(triggerSelector).attr("data-reveal-target");
  var revealMode = $(revealTarget).attr("data-reveal-mode");

  $(revealTarget).hide();
  $(triggerSelector).css({'cursor':'pointer'});

  $(triggerSelector).click(function(){
        if(revealMode == "slide") {
          $(revealTarget).slideToggle();
        } else {
          $(revealTarget).toggle();
        }
    $(this).toggleClass(activeClass);
  });
}

revealSomething(".js-reveal", "active");

Beispiel HTML

<button class="js-reveal" data-reveal-target=".js-reveal-container">Klick mich</button>
  <div class="js-reveal-container" data-reveal-mode="slide">
    <p>Lorem Ipsum</p>
  </div>

Erklärung

Der Button

Wir benötigen ein Trigger-Element, zum Auslösen des Einblendevorgangs mit der Klasse ".js-reveal" und dem Data-Attribut "data-reveal-target". Dieses Attribut enthält die Klasse des Elements das wir zeigen möchten.

Inhalts-Container

Der Klassenname des Inhalts-Containers muss mit dem, was wir als "data-reveal-target" bei dem Button angegeben haben, übereinstimmen. Außerdem kann man dem Container noch per "data-reveal-mode" Attribut sagen wie er eingeblendet werden soll (slide / toggle).

Code live ausprobieren

Zum Ausprobieren und rumspielen findet man das Snippet auf: http://jsbin.com/jabadiniji/3/edit?html,js,output
Der Vorteil des Snippets ist das freie Verteilen von Triggern und Containers auf einer Seite - ich wünsche viel Spass damit!