Ergebnis 1 bis 3 von 3
Like Tree1Likes
  • 1 Post By kkapsner

Thema: Spoiler

  1. #1
    sol1265 ist offline Grünschnabel
    registriert
    12-04-2017
    Beiträge
    1

    Spoiler

    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:

    HTML-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> 

  2. #2
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: Spoiler

    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:
    Code:
    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.
    Geändert von paul schmitz (12-04-2017 um 19:46 Uhr) Grund: Verbesserung von kkapsner übernommen
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.546

    AW: Spoiler

    Zitat Zitat von paul schmitz Beitrag anzeigen
    elms[i].setAttribute("display", "none");
    Das ist falsch:
    Code:
    elms[i].style.display = "none";
    Und da du vorher alle Elemente auf "none" setzt, ist die Abfrage danach sinnfrei.

    Code:
    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";
    		}
    	}
    }
    paul schmitz likes this.

Ähnliche Themen

  1. Spoiler via Checkbox
    Von yacms23 im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 25-01-2011, 23:21
  2. Spoiler zeigt keine Bilder/videos
    Von Unidon im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 04-02-2010, 15:59
  3. Spoiler-Script für phpBB
    Von Mefisto im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 04-08-2008, 20:52

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •