[HTML] Mit klick auf Button mehrere anzeigen?

Wie kann ich mit dem klick auf einen Button mehrere andere Button anzeigen lassen?

Also so eine Art "Mehr Anzeigen"

3 Antworten

06.07.2020, 06:04

Du kannst den Knopf mit einem onclick event versehen und damit eine funktion aufrufen

<button onclick="knopf()"> Mehr Anzeigen </button>

Nun kannst du da drunter ein div Element machen welches von anfang an unsichtbar ist

<div style="display: none" id="aufklappbar">
   <button> Button 1 </button>
   <button> Button 2 </button>
</div>

Jetzt einfach prüfen ob es unsichtbar ist und wenn ja soll es sichtbar gemacht werden. Wenn es bereits sichtbar ist soll es wieder unsichtbar werden

function knopf() {
  if (document.getElementById("aufklappbar").style.display == "none") {
    document.getElementById("aufklappbar").style.display = "block";
  } else {
    document.getElementById("aufklappbar").style.display = "none";
  }
}

Der script sollte ganz unten im Quelltext stehen

NackterGerd

06.07.2020, 08:53

Schau dir doch mal an wie man Navigation implementiert

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Dropdown-Men%C3%BC

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

06.07.2020, 02:59

HTML-Elemente kannst du mit der display-Eigenschaft ein- und ausblenden. Um auf den Klick auf einen Button reagieren zu können, musst du einen Listener an den Button hängen.

Noxxxxxxxx

Beitragsersteller

06.07.2020, 03:48

Und wie funktioniert das jetzt?

regex9

06.07.2020, 06:07

@Noxxxxxxxx

Dazu habe ich doch die Antwort geschrieben? Hast du sie dir nicht durchgelesen? Das blau markierte Wort ist übrigens ein Link.

Ähnliche Beiträge

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

HTML CSS - Button soll 10 Sekunden nach dem Klick ausgeführt werden?

Hallo,

sobald mein Button ( HTML / CSS / (JS) ) gedrückt wird, soll stehen: "Bitte warte noch 10 Sekunden". Nach den Sekunden soll der Button ausgeführt werden.

Wie geschieht das?

...zum Beitrag

CSS/HTML-Button auf Unterseite verweisen?

Hey,

ich würde gerne eine Unterseite per Button-Klick öffnen. Wie kann ich das machen?

<body>

<button class="Regelwerk" OnClick="location.href="regelwerk.html>REGELWERK</button> <br>

<button class="Updates" OnClick="location.href='http://www.google.de'">UPDATES</button> <br>

<button class="Impressum" OnClick="location.href='http://www.google.de'">IMPRESSUM</button>

</body>

...zum Beitrag

HTML/CSS Formular bei Klick in Vordergrund?

Ich möchte das wenn man bei meinem Formular sobald man ein Klick auf einen Button macht es in den Vordergrund gestellt wird.

...zum Beitrag

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zum Beitrag

Weißer Rand um Button HTML?

Hallo,

ich habe in HTML einfach ein bisschen rumgespielt und gesehen das um den Button ein weißer Rand ist. Wie kann ich den entfernen?

...zum Beitrag

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zum Beitrag

Mit HTML <Button> Python Script ausführen?

Hallo! Ist es möglich, mit zum Beispiel einem Button, auf einer HTML Seite ein Python script auszuführen? Ich habe bereits im Internet danach gesucht, die dort gezeigten Dinge waren mir allerdings zu kompliziert. Geht es aus einfacher? (Vielleicht so: <button script="click.py">Klick Mich!</button>)

Ist das nur mit HTML umsetzbar?

Danke für jede Antwort!

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

Wie kann ich bei html einen springenden Button machen?

Ich möchte das wenn man mit dem Mauszeiger über den button geht, das der button sich dann verschiebt sodass man ihn nie drücken kann... also wie so eine art spiel... kann mir jemand den code schreiben ? Danke im vorraus.

...zum Beitrag

Wie ändere ich einen Paragraph indem ich einen Button benutze mithilfe von HTML und Javascript?

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

...zum Beitrag

Wie kann ich einem Button (html, css, javascript) mehrere Funktionen zuweisen?

Hallo Zusammen, ich bin Neuling und möchte einen Button erstellen, welcher drei verschiedene Textfarben von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot, orange, gelb und sollen nach dem Klick auf einen Button schwarz werden.

Kann mir dabei jemand helfen?

Dabei soll die Formatierung der Textzeilen genau so bleiben:

Danke und liebe Grüße

...zum Beitrag

html iframe durch button klick anzeigen lassen?

Hallo! Ich habe mich mal ein wenig mit html versucht und versuche nun ein iframe durch einen button klick anzeigen zu lassen.. jedoch habe ich keine ahnung von css, java oder sonst irgendwelchen anderen programiersprachen :D. Ist es irgendwie möglich so etwas auch nur in html zu "programmieren"? Versuche mehrere Videos durch verschiedene Knöpfe anzeigen und wieder verschwinden zu lassen. Danke im voraus

...zum Beitrag

Javascript (jQuery) / HTML Button mehrmals verwenden?

Hey, ich habe euch hier gleich mal ein JsFiddle verlinkt damit ihr mein Problem besser verstehen könnt: https://jsfiddle.net/Johnny3_3/dqqrvm6q/

Wenn ihr auf den Start Button klickt, dann wird durch Javascript (jQuery) der Kreis sichtbar gemacht. Allerdings kann ich durch das erneute klicken auf den Button den Kreis nicht verschwinden und danach nochmal sichtbar machen lassen. Sprich ich will unendlich oft auf den Button klicken können und somit den Kreis sichtbar und unsichtbar machen.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen