Mit Javascript Text verstecken und anzeigen lassen (Deutsche Anleitung)

von | Mai 30, 2022 | Design | 0 Kommentare

Inhaltsverzeichnis

Heute möchte ich euch etwas zeigen, das viele bereits aus den Online Shops kennen. Und zwar zeige ich dir, wie du es schaffst dass ein Element ausgeblendet ist und erst sichtbar wird, wenn man eine Checkbox aktiviert.

Dieser Effekt kann man sehr schön einsetzen, man kann nicht nur Texte sondern auch ganze Elemente ein und ausblenden, halt einfach alles was eine Unique ID hat.

Video

HTML

1
2
3
4
5
<form>
        <input type="checkbox" id="checkbx" onclick="checkMe()"> Bitte checken
        <p id="msg">Sie haben die AGB akzeptiert</p>
 
    </form>

CSS

1
2
3
#msg {
            display: none;
        }

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 
    function checkMe(){
        var cb = document.getElementById("checkbx");
        var meldung = document.getElementById("msg");
        if(cb.checked == true){
            meldung.style.display = "block";
        } else {
            meldung.style.display = "none";
        }
    }
 
 
</script>




0 Kommentare

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