Collapsible adjustments in HTML/XHTML Posted March 8, 2019 Hi, I just need to do some arrangementsto my html collapsible: I'd like to start it closed so now it begins opened. I'd like to get a mark as opened and another one as closed. I'd like to close the collapsible if there's one opened. I'd like to get a white line between collapsible, or something that identifies different collapsibles. Here you have my HTML code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #1e73be; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #1e73be; } .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; } </style> </head> <body> <button class="collapsible">Mostrar Plan de Ahorro/Niños</button> <div class="picture"> <center> <img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.32.02.png" width="791" height="689"> </center> </div> <button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad Histórica</button> <div class="picture"> <center> <img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.19.45-1.png" width="796" height="299"> </center> </div> <button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad año a año</button> <div class="picture"> <center> <img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.21.31-1.png" width="788" height="370"> </center> </div> <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll.addEventListener("click", function() {this.classList.toggle("active");var content = this.nextElementSibling;if (content.style.display === "block") {content.style.display = "none";} else {content.style.display = "block";}});}</script> </body></html> Thanks a lot!
Collapsible adjustments
in HTML/XHTML
Posted
Hi, I just need to do some arrangementsto my html collapsible:
Here you have my HTML code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #1e73be;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #1e73be;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Mostrar Plan de Ahorro/Niños</button>
<div class="picture">
<center>
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.32.02.png" width="791" height="689">
</center>
</div>
<button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad Histórica</button>
<div class="picture">
<center>
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.19.45-1.png" width="796" height="299">
</center>
</div>
<button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad año a año</button>
<div class="picture">
<center>
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.21.31-1.png" width="788" height="370">
</center>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
Thanks a lot!