Divi: Bei Klick auf Button ein Modul anzeigen oder verstecken

von | Apr 13, 2022 | Allgemein | 2 Kommentare

Schlagwörter: CSS - CSS3 - DIVI

Ihr habt euch schon mal gefragt wie man denn ein Bild, ein Text oder ein ganzes Modul anzeigen und wieder verstecken kann, wenn man auf ein Button geklickt hat? In dieser kleinen Divi Anleitung zeige ich euch wie ihr so ein kleinen Effekt machen könnt, der einfach einzubauen ist aber eine grosse Wirkung auf eure Webseiten Besucher hat.

Video

Das zu versteckendes Modul

Als erstes müsst ihr einfach mal ein zu versteckendes Modul definieren und ihr die ID ≪verstecken≫ geben.

Button

Danach müsst ihr natürlich noch ein Button einbauen. Diesem Button gebt ihr die Link URL von ≪#verstecken≫ ein und dann müsst ihr noch die CSS Klasse definieren ≪btn_verstecken closed≫

Versteckendes Element

Beim Element welches man verstecken lassen möchte, muss man noch eine ID setzen und ich habe sie hier ≪verstecken≫ genannt

CSS

Wie immer gebt ihr diesen Code in den CSS Bereich ein.

1
2
3
#verstecken {display: none; }
.btn_verstecken.closed:after {content:"\33"}
.btn_verstecken.opened:after {content:"\33"}

Javascript

Diesen Befehl baut ihr dann noch im Head Bereich eurer WordPress installation ein.

1
2
3
4
5
6
7
8
9
10
<script>
 
jQuery(function($){
 $('.btn_verstecken').click(function(e){
	e.preventDefault();
	$("#verstecken").slideToggle();
	$('.btn_verstecken').toggleClass('opened closed');
	});
});
</script>




2 Kommentare

  1. Tobi

    Vielen Dank. Lässt sich der Button umbenennen, nachdem man drauf geklickt hat?
    Also statt „Inhalte anzeigen“ dann „Inhalte verbergen“.

    Antworten
  2. Heide

    Hallo, vielen Dank für das Video, ich konnte damit mein Problem lösen. Mir scheint, dass oben in dem Code ein Tippfehler ist. Du schreibst im CSS-Code zweimal „\33“. Das führt bei mir dazu, dass unterhalb des Buttons nach dem Klicken eine 3 angezeigt wird. Ich habe die beiden Zeilen korrigiert auf „\3“ und jetzt wird keine 3 mehr angezeigt.

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung