Ich habe einen Code geschrieben, wo ich eine Box habe und wenn ich auf den Button klicken, zeigt es tatsächlich mehr oder weniger Info. Sehen sie in Aktion hier: https://jsfiddle.net/075tcezL/zeigen mehr info wenn klicken sie auf eine taste html, css, javascript
/css
#model {
width: 300px;
border: 1px solid #c1c1c1;
margin: 20px 10px;
padding: 0 5px;
float: left;
max-height: 300px;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-heigth 0.7s;
}
#show-more {
display: block;
background-color: #75868E;
width: 100px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
margin: 20px auto;
cursor: pointer;
height: 15px;
padding: 10px 0;
}
#model.open {
max-height: 1000px;
-webkit-transition: max-heigth 0.7s;
-moz-transition: max-heigth 0.7s;
transition: max-heigth 0.7s;
}
// HTML
<body>
<div id="model" class="model1">
<h3>Series 3</h3>
<a href="#series3" id="sseries"><img class="image"
src="image"></a>
<p>Text to hide or show.</p>
</div>
<a id="show-more" class="show">Show More</a>
<script src="javascript.js"></script>
</body>
// Das funktioniert mit einem Kasten
var content = document.getElementById("model");
var button = document.getElementById("show-more")
button.onclick = function(){
if(content.className == "open"){
content.className = "";
button.innerHTML = "More";
} else {
content.className = "open";
button.innerHTML = "Less";
}
};
aber wenn ich drei Boxen, wie dies - https://jsfiddle.net/jw7pfb1w/ Wie öffne oder schließe ich sie gleichzeitig, wenn ich auf diesen Knopf klicke?
Jede Hilfe wäre willkommen!
Sie benötigt hier Ihr minimales Beispiel für das Problem Code zu platzieren, kein jsfiddle, die in Zukunft helfen, niemanden ändern oder verschwinden die Zukunft: https://stackoverflow.com/help/mcve – Rob
Hinzugefügt Problemcode. –