Erstellen einer Expand Taste

von | 25. Januar 2020 | Tutorials

Text durch eine Expand Taste zum Vorschein bringen

In diesem kurzen aber knackigem Tutorial zeigen wir Euch, wie Ihr Mit einem Button Texte expandieren und wieder verstecken könnt. Im Prinzip generieren wir über die function.php einen Shortcode, den wir dann in jedem beliebigen Modul dann einbinde können. Der Text, der sich dann im Shortcode [expand]Ich bin der versteckte Text[/expand] platziert wird, ist der der Text, der dann versteckt wird bzw. dann durch Klick auf eine Taste zum Vorschein gebracht wird. Fangen wir also an.

Generieren wir zuerst den Shortcode und die Tasten „Mehr erfahren“ und „Text verbergen“

Füge zuerst die folgenden Codezeilen in Deine functions.php ein. Du kannst den Text im Code „Mehr erfahren“ bzw. „Text verbergen“ durch jeden gewünschten Text ersetzen.

function expand_shortcode($atts, $content = null) {
$default_class = "button background-taste";
$a = shortcode_atts( array(
	'more'  => 'Mehr erfahren',
	'less'  => 'Text verbergen',
	'class' => '',
	'style' => '',
), $atts );
$html='
'.$content.'
'.$a['more'].'
'; return $html; } add_shortCode('expand', 'expand_shortcode');

Ein wenig jQuery

Eine solche Funktion wie in diesem Tutorial dargestellt benötigt auch etwas jQuery. Den folgenden Snippet fügst Du am besten in Dein Child Theme ein. Ich möchte nochmals auf unser kostenfreies Child Theme für Divi hinweisen. In diesem Childtheme findest Du einen Ordner „js“. in diesem Ordner ist eine Datei namens custom.js. Dort kopierst Du den Code rein. Ein Child Theme ist kein muss. Aber es bietet einfach nur Vorteile und kann es an dieser Stelle einfach nur empfehlen. Eine Alternative zeige ich Dir gleich nach dem Snippet auf.

jQuery Code für Dein Child-Theme

Das ist der Code, falls Ihr unser Divi Mastermind Child Theme nutzt, welchen Ihr ganz einfach in der custom.js Datei platzieren könnt. Ihr braucht keinen zusätzlichen öffnenden / schliessenden <script>-tag:

jQuery(document).ready(function($){
  $(".exp-button").click(function () {
    var lessName = $(this).attr('data-less');
    var moreName = $(this).attr('data-more');
    var duree = 1000;
      if($(this).text()==moreName) {
      $(this).text(lessName);
      $(this).parent().prev().slideDown(duree);
    }
    else {
      $(this).text(moreName);
      $(this).parent().prev().slideUp(duree);
    }
    var x = setTimeout(() => $(this).closest('.degrade').toggleClass('close'), duree);
  });

});

 

jQuery Code für Divi Integration – Tab

Das ist der Code, falls Ihr das jQuery lieber in Divi > Theme-Optionen > Integration > Code dem < head > Ihres Blogs hinzufügen benutzen wollt. ++ WICHTIG – packt den ganzen Code in ein <script>-tag (SIEHE SCREENSHOT) sonst funktioniert er nicht!!

Das ganze sieht in etwa so aus wie im unten gezeigten Screenshot. Wir ihr sehen könnt befindet sich die jQuery Anweisung im sich öffnenden und schliessendem Script-Tag und wird mit der Funktion angefangen.
Der CSS Code:

Den CSS Code könnt ihr in das style.css ODER in Divi > Theme-Optionen > Allgemeines ganz unten in das Feld „Eigenes CSS“ platzieren. Somit schreibt er das CSS direkt in die Datenbank. auch hier möchte ich explizit die Empfehlung äussern, euch ein Child Theme anzulegen und zu nutzen.

/* Taste ausklappen */
.hide {
  display:none;
}
.degrade {
  transition:background-color 1300ms ease 0ms,border 1300ms ease 0ms;
}
.degrade.close &gt; *:after {
  content:"";
  position:absolute;
  top:0;
  display:block;
  width:100%;
  height:calc(100% - 32px);
}
/* Style hier Deine Taste */
.button {
  display:block;
  max-width:150px;
  cursor:pointer;
  padding:4px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  text-align:center;
  color:#fff;
  margin-top:20px;
  transition: background-color 300ms ease 0ms,border 300ms ease 0ms;
}
.button:hover {
  box-shadow:1px 1px 10px 0px rgba(0,0,0,0.3);
}

/* Hintergrundfarbe Deiner Taste */
.background-taste {
  background:#2da1db;
}

/* style hier die Hover Farbe Deiner Taste */
.background-taste:hover {
  background:#000;
  color: #2da1db;
  border: solid 1px #2da1db;
}

 

Wenn Ihr das alle gemacht habt, dann öffnet ein Textmodul und schreibt Euren Text da rein. Der Text, der zu Anfang versteckt sein soll, bitte in den Shortcode [expand]Mein versteckter Text[/expand] packen. Das kann in etwa so aussehen wie im folgenden Screenshot:
Speichere dann Deine Arbeit und wenn Du alles richtig gemacht hast, sieht Dein Ergebnis dann so aus:
Ich hoffe, dass Euch dieses Tutorial weiterhilft. Lieben Gruss, Levent

©2019 - Ein Design mit von Divi Mastermind - Benny
Impressum | Datenschutz

Divi ist ein eingetragenes Warenzeichen von Elegant Themes. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von Elegant Themes unterstützt.