Frage Buttons öffnen andere Buttons

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

majesticc89

Mitglied
8 Mai 2017
94
0
6
31
Servus Leute,
kurze Frage: Wie bekomme ich es hin, dass jeder Button selbstständig agiert? Momentan sind es 3 Buttons, die bei "click" ein div freigeben (bzw. verbergen).
Problem (siehe Code unten) ist, dass beim "click" auf Button1, sich auch Button 2 und 3 öffnen.
Bei "click" auf Button2 öffnen sich 2+3
und bei click auf Button3 öfnnet sich nur dieser.
Wie kann ich das umgehen?

LG,

HTML:
Code:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>slideToggle demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div class="container">
      <button>BUTTON 1</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag1" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag1" style="display:none;">
      CONTENT 1
      </div>
     
      <button>BUTTON 2</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag2" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag2" style="display:none;">
     CONTENT 2
      </div>
     
      <button>BUTTON 3</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag3" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag3" style="display:none;">
      CONTENT 3
      </div>
    </div> 
  </body>
</html>

CSS:
Code:
div.container {
  width: 600px;
  height: 500px;
  border: 3px double;
 
}

button {
  font-size: 110%;
  background: lightfrey;
  padding: 1%;
  margin: 1%;
  width: 98%;
  height: 15%;
}
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
Servus Leute,
kurze Frage: Wie bekomme ich es hin, dass jeder Button selbstständig agiert? Momentan sind es 3 Buttons, die bei "click" ein div freigeben (bzw. verbergen).
Problem (siehe Code unten) ist, dass beim "click" auf Button1, sich auch Button 2 und 3 öffnen.
Bei "click" auf Button2 öffnen sich 2+3
und bei click auf Button3 öfnnet sich nur dieser.
Wie kann ich das umgehen?

LG,

HTML:
Code:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>slideToggle demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div class="container">
      <button>BUTTON 1</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag1" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag1" style="display:none;">
      CONTENT 1
      </div>
    
      <button>BUTTON 2</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag2" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag2" style="display:none;">
     CONTENT 2
      </div>
    
      <button>BUTTON 3</button>
      <script>
        $( "button" ) .click(function() {
        $( ".spieltag3" ).slideToggle( "slow" );
        });
      </script>
      <div class="spieltag3" style="display:none;">
      CONTENT 3
      </div>
    </div>
  </body>
</html>

CSS:
Code:
div.container {
  width: 600px;
  height: 500px;
  border: 3px double;
 
}

button {
  font-size: 110%;
  background: lightfrey;
  padding: 1%;
  margin: 1%;
  width: 98%;
  height: 15%;
}

Alle <script> Tags weg, das vor dem schließenden Body-Tag einfügen und die Sache sollte laufen...
Code:
$("button").click(function() {
    $(this).next().slideToggle("slow");
});
 
Werbung:

Neueste Beiträge