[FRAGE] Spoiler

[sol1265]

Ich habe folgendes Problem, ich möchte ein paar Spoiler erstellen. Das hat soweit funktioniert, aber ich möchte dass wenn ein Spoiler geöffnet ist und man auf einen anderen klickt, der geöffnete sich wieder schließt.

Wie bekomme ich das hin? Danke für Eure hilfe.

Hier mein Code:

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

<div id="spoiler" style="display:none"> 
	Content
</div> 

<br><br>

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>

<div id="spoiler2" style="display:none"> 
	Content2
</div>

 

[paul schmitz]

1. Erstelle dir eine Funktion toggleSpoiler(id), die einen Spoiler umschaltet. So vermeidest du redundanten Code.
2. Weise allen Spoilern eine Klasse zu. Bevor du in der Funktion einen Spoiler aktivierst/deaktivierst, deaktivierst du einfach alle vorher.

Hier mal ein möglicher Codeansatz:

function toggleSpoiler(id){
  // Alle Spoiler verstecken
  var elms = document.getElementsByClassName('spoiler');
  var el=document.getElementById(id),elstyle=el.style.display;
  for (var i = 0; i < elms.length; i++)
   elms[i].style.display="none"; //Danke kkapsner
  // Display von Element mit id=id umschalten
  if(elstyle=='none') {
    el.style.display=''
  }else{
    el.style.display='none'
  }
}

Du musst noch allen HTMLSpoilerElementen den richtigen onclick-handler und die Klasse "spoiler" zuweisen.

 

[kkapsner]

elms.setAttribute("display", "none");

Das ist falsch:

elms[i].style.display = "none";

Und da du vorher alle Elemente auf "none" setzt, ist die Abfrage danach sinnfrei.

function toggleSpoiler(id){
	var el = document.getElementById(id);
	if (el){
		// Alle Spoiler verstecken
		var elms = document.getElementsByClassName("spoiler");
		for (var i = 0; i < elms.length; i += 1){
			if (elms[i] !== el){
				elms[i].style.display = "none";
			}
		}
		// Display von Element mit id = id umschalten
		if (el.style.display === "none"){
			el.style.display = "";
		}
		else {
			el.style.display = "none";
		}
	}
}