|
|
| Line 1: |
Line 1: |
| <syntaxhighlight lang="html">
| | alalalabalalala lala 😛🇵🇹 |
| <!DOCTYPE html>
| |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Collapsible Section</title>
| |
| <style>
| |
| .collapsible {
| |
| background-color: #f1f1f1;
| |
| cursor: pointer;
| |
| padding: 18px;
| |
| width: 100%;
| |
| border: none;
| |
| text-align: left;
| |
| outline: none;
| |
| font-size: 15px;
| |
| }
| |
| | |
| .active, .collapsible:hover {
| |
| background-color: #ddd;
| |
| }
| |
| | |
| .content {
| |
| padding: 0 18px;
| |
| display: none;
| |
| overflow: hidden;
| |
| background-color: #f1f1f1;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| | |
| <button class="collapsible">Open Collapsible</button>
| |
| <div class="content">
| |
| <p>This is the content inside the collapsible section. You can add any content here.</p>
| |
| </div>
| |
| | |
| <script>
| |
| var coll = document.getElementsByClassName("collapsible");
| |
| var i;
| |
| | |
| for (i = 0; i < coll.length; i++) {
| |
| coll[i].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>
| |
| </syntaxhighlight>alalalabalalala lala 😛🇵🇹
| |
|
| |
|
| {{Userbox/LovesTGB}} | | {{Userbox/LovesTGB}} |
