Felixlae
-
Posts
1 -
Joined
-
Last visited
Felixlae's Achievements
Newbie (1/7)
0
Reputation
-
Felixlae joined the community
-
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!