Inhaltsverzeichnis
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> |
0 Kommentare