Jump to content

Collapsible adjustments


Recommended Posts

Hi,  I just need to do some arrangementsto my html collapsible:

  1. I'd like to start it closed so now it begins opened.
  2. I'd like to get a mark as opened and another one as closed.
  3. I'd like to close the collapsible if there's one opened.
  4. I'd like to get a white line between collapsible, or something that identifies different collapsibles.

Here you have my HTML code:


<meta name="viewport" content="width=device-width, initial-scale=1">
.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;

<button class="collapsible">Mostrar Plan de Ahorro/Niños</button>
<div class="picture">
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.32.02.png" width="791" height="689">

<button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad Histórica</button>
<div class="picture">
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.19.45-1.png" width="796" height="299">

<button class="collapsible">Mostrar Plan de Ahorro/Niños Rentabilidad año a año</button>
<div class="picture">
<img src="https://finanzasamedida.com/wp-content/uploads/2019/03/Screenshot-2019-03-07-10.21.31-1.png" width="788" height="370">

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll.addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";


Thanks a lot!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...