Collapsible adjustments

Felixlae · 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>

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!

Sign In

Collapsible adjustments

Recommended Posts

Felixlae

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity