Elementor versteckte section mit button klick sichtbar machen?
Hallo zusammen,
würde gerne eine Sektion auf der Seite dann sichtbar machen wenn man auf einen button klickt.
wie bekomme ich das hin?
Danke im vorraus😊
2 Antworten
du gibst der section ne id und den button auch eine dann kannst du es mit javascript machen.
<script type="text/javascript" >
document.getElementById("deineSektion").style.display = 'none';
document.getElementById("deinButton").addEventListener('click', function(){
document.getElementById("deineSektion").style.display = 'block';})
</script>
so wie ich es geschrieben habe. du musst über javascript die sektion verstecken. Das kannst du über style.display = 'none' machen. Bedeutet du benötigst mindestens 3 zeilen javascript. Andere Möglichkeit kenne ich nicht mit dem Elementor
Habe diesen code gerade gefunden:
jQuery(document).ready(function( $ ){
$('#showBlock').click(function() {
$('#hiddenBlock').show("slow");
});
});
wenn du die Biblothek auf der Webseite hast kannst du den code auch nehmen. Du musst aber auch das Element nicht sichtbar machen (verstecken) bevor die Seite komplett geladen ist.
jQuery(document).ready(function( $ ){
jQuery("#hiddenBlock").hide();
jQuery('#showBlock').click(function() {
jQuery('#hiddenBlock').show("slow");
});
});
schau dir mal folgendes näher an. Denke das hilft um es zu verstehen
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
Mir fällt da zuerst die CSS-Klasse collapse aus Bootstrap ein
https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp
oder man macht es mit Jquery
<div style="display: none">
<p>Blabla</p>
</div>
Im js:
$('#button').on('click', {
$('#section').show();
},false);
Ich habe schon verstanden wie ich es schaffen kann das wenn man auf den button klickt automatisch runtergerollt wird, aber wie schaffe ich es das die section erst angezeigt wird wenn man auf den button klickt und vorher versteckt ist?
Danke für deine Antwort