Create HTML accordian

2021-06-04 16:58:53 -04:00
parent a9ce9705c1
commit f8768fee07
1 changed files with 50 additions and 0 deletions
@@ -0,0 +1,50 @@
 <!doctype html>
 <html>
 <head>
    <title>JS Tester</title>
    <style>
        .active {
            display: block !important;
        }
        .myText {
            display: none;
        }
        .title {
            font-size: 1.5em;
            background-color: #ddd;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="title">Title #1</div>
        <div class="myText">Just some text #1</div>
        <div class="title">Title #2</div>
        <div class="myText">Just some text #2</div>
        <div class="title">Title #3</div>
        <div class="myText">Just some text #3</div>
    </div>
    <script>
        const menus = document.querySelectorAll('.title');
        const openText = document.querySelectorAll('.myText');
        menus.forEach((el) => {
            el.addEventListener('click', (e) => {
                console.log(el.nextElementSibling);
                remover();
                el.nextElementSibling.classList.toggle('active');
            })
        })
        function remover() {
            openText.forEach((ele) => {
                ele.classList.remove('active');
            })
        }
    </script>
 </body>
 </html>