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!