Kann man den Button zu den zusätzlichen Infos per Mausklick wieder schließen lassen?

Question

Ich habe mit diesem Link eine zusätzliche Infobox einblenden lassen: https://www.soscisurvey.de/help/doku.php/de:create:popup

Im Text heißt es:
Mehr Info

Damit die Box sich aber wieder schließt, muss ich auf "schließen" am Ende der Seite klicken. Gibt es auch eine Möglichkeit, über den Button "Mehr Info" die Box wieder zu schließen? Also wenn ich einmal darauf klicke, öffnet sie sich und beim zweiten Klick schließt sie sich wieder?

Answer 1

Sie müssten den Code ein wenig abändern, damit die Aktion des Knopfes je nach Zustand (angezeigt/nicht angezeigt) angepasst wird. Das könnte dann so aussehen:

<!-- Der Knopf zum Anzeigen/Ausblenden der Info -->
<button type="button" onclick="buttonClick()">Mehr Info</button>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier kommt die Zusatz-Info
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";

var infoVisible = true;
function buttonClick() {
  if (infoVisible) {
    buttonHide();
  } else {
    buttonShow();
  }
}
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  infoVisible = true;
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
  infoVisible = false;
}

// Erstmal die Info ausblenden
buttonHide();
//-->
</script>

Im Prinzip können Sie in den Funktionen buttonShow() und buttonHide() auch die Beschriftung des Knopfes anpassen, damit nach dem ersten Klick "Info ausblenden" dort steht.

Comments

Leider funktioniert das nicht, dass beim erneuten Klicken auf den Knopf die Textbox wieder verschwindet (bei Verwendung Ihres Codes). Müsste man Button hide nicht vorher irgendwie definieren? Ist es außerdem möglich, sowohl über schließen am Ende der Seite als auch über den Button "Mehr Infos" am Anfang der Seite den Button zu schließen?

---

Pardon, die Variable infoVisible wurde noch nicht korrekt gesetzt. Ich habe den Code oben nochmal ergänzt.