---
title: Toggle Section / Row mit Button aufbauen
description: "## Aufgabe: Eine Section oder Row soll nach klick auf einen Button auffahren und wieder zufahren. ## Lösung: ### Button Button erstellen, wie gewünscht formatieren und die classen: *tg-button tg-button-closed*geben ### Section oder Row für den Toggle erstellen Füge eine…"
url: "https://wp-help.support/docs/toggle-section-row-mit-button-aufbauen/"
updated: "2025-02-18"
category: CSS Tricks
---

# Toggle Section / Row mit Button aufbauen

## Aufgabe:

Eine Section oder Row soll nach klick auf einen Button auffahren und wieder zufahren.

## Lösung:

### Button

Button erstellen, wie gewünscht formatieren und die classen: *tg-button tg-button-closed*geben

### 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.

      Toggle anzeigen        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.