Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- .accordion {
- background-color: #eee;
- color: #444;
- cursor: pointer;
- padding: 18px;
- width: 100%;
- border: none;
- text-align: left;
- outline: none;
- font-size: 15px;
- transition: 0.4s;
- }
- .active, .accordion:hover {
- background-color: #ccc;
- }
- .panel {
- padding: 0 18px;
- background-color: white;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.2s ease-out;
- }
- </style>
- </head>
- <body>
- <button class="accordion">All Systems Operational ✔️</button>
- <div class="panel">
- <p>Everything is working so don't be spooked.</p>
- </div>
- <button class="accordion">Issue Name (Investigating)👁️</button>
- <div class="panel">
- <p>We're working on the hitsabuna cuiana</p>
- </div>
- <button class="accordion">Fixed ✔️</button>
- <div class="panel">
- <p>The hitsabuna cuiana issue has been fixed, carry on.</p>
- </div>
- <script>
- var acc = document.getElementsByClassName("accordion");
- var i;
- for (i = 0; i < acc.length; i++) {
- acc[i].addEventListener("click", function() {
- this.classList.toggle("active");
- var panel = this.nextElementSibling;
- if (panel.style.maxHeight){
- panel.style.maxHeight = null;
- } else {
- panel.style.maxHeight = panel.scrollHeight + "px";
- }
- });
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement