majesticc89
Mitglied
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:
CSS:
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%;
}
