Divi: Bei Klick auf Button ein Modul anzeigen oder verstecken

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>