Aufgabe: #
Eine Section oder Row soll nach klick auf einen Button auffahren und wieder zufahren.
Section oder Row für den Toggle erstellen #
Füge eine Section oder Row in deine Website und gebe ihr die class: tg-section – ausserdem unter Erweitert / Benutzerdefiniertes CSS / Modulelemente / Hautpelement – display: none; damit die Section /Row ersteinmal unsichtbar ist.
Füge den gewünschten Content in die Section / Row
Code Modul für das Script #
Erstelle ein Code Modul mit folgendem Inhalt
Code Modul für die styles und das JS #
Füge ein Code Modul hinzu und setze die CSS und das JS an – denke daran die beiden Codes mit <style></style> bzw. <script></script> Tags einzusetzen
jQuery(document).ready(function($){
jQuery(function($){
var buttons = {
'.tg-button': {
'toggle': '.tg-section',
}
};
$.each(buttons, function(button, elements) {
$(button).click(function(e){
e.preventDefault();
$(elements.toggle).slideToggle();
$(button).toggleClass('tg-button-closed tg-button-active');
});
});
});
Ergebnis: #
Nutze den Button um den Toggle Inhalt anzuzeigen.
Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfasst alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.
