| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Accordian</title>
|
| </head>
|
| <body>
|
|
|
| <div class="accordion">
|
| <div class="contentBx">
|
| <div class="label">List One</div>
|
| <div class="content">
|
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Amet impedit atque animi aspernatur at minus velit. Autem et, tenetur corrupti ab praesentium quaerat corporis similique, magni sed quisquam eos distinctio suscipit pariatur incidunt dignissimos molestias expedita quidem culpa neque delectus reprehenderit voluptas nostrum veritatis. At ipsa nostrum cum voluptate, inventore obcaecati earum soluta debitis numquam ab, fugit atque doloremque sed neque assumenda reprehenderit necessitatibus fugiat ducimus accusantium quasi velit! Unde, sed quia recusandae repudiandae sint provident excepturi cupiditate facere, at beatae, atque nisi quo dolor ut iusto fuga! Architecto dolores magni corporis odio ducimus animi laudantium tenetur, tempora mollitia possimus ea, ipsa nihil repudiandae maiores nisi veniam commodi consequatur facilis reiciendis non amet! Est reiciendis ducimus eaque impedit eum, culpa alias fuga delectus, quaerat rerum.</p>
|
| </div>
|
| </div>
|
|
|
| <div class="contentBx">
|
| <div class="label">List Two</div>
|
| <div class="content">
|
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Amet impedit atque animi aspernatur at minus velit. Autem et, tenetur corrupti ab praesentium quaerat corporis similique, magni sed quisquam eos distinctio suscipit pariatur incidunt dignissimos molestias expedita quidem culpa neque delectus reprehenderit voluptas nostrum veritatis. At ipsa nostrum cum voluptate, inventore obcaecati earum soluta debitis numquam ab, fugit atque doloremque sed neque assumenda reprehenderit necessitatibus fugiat ducimus accusantium quasi velit! Unde, sed quia recusandae repudiandae sint provident excepturi cupiditate facere, at beatae, atque nisi quo dolor ut iusto fuga! Architecto dolores magni corporis odio ducimus animi laudantium tenetur, tempora mollitia possimus ea, ipsa nihil repudiandae maiores nisi veniam commodi consequatur facilis reiciendis non amet! Est reiciendis ducimus eaque impedit eum, culpa alias fuga delectus, quaerat rerum.</p>
|
| </div>
|
| </div>
|
|
|
| <div class="contentBx">
|
| <div class="label">List Three</div>
|
| <div class="content">
|
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Amet impedit atque animi aspernatur at minus velit. Autem et, tenetur corrupti ab praesentium quaerat corporis similique, magni sed quisquam eos distinctio suscipit pariatur incidunt dignissimos molestias expedita quidem culpa neque delectus reprehenderit voluptas nostrum veritatis. At ipsa nostrum cum voluptate, inventore obcaecati earum soluta debitis numquam ab, fugit atque doloremque sed neque assumenda reprehenderit necessitatibus fugiat ducimus accusantium quasi velit! Unde, sed quia recusandae repudiandae sint provident excepturi cupiditate facere, at beatae, atque nisi quo dolor ut iusto fuga! Architecto dolores magni corporis odio ducimus animi laudantium tenetur, tempora mollitia possimus ea, ipsa nihil repudiandae maiores nisi veniam commodi consequatur facilis reiciendis non amet! Est reiciendis ducimus eaque impedit eum, culpa alias fuga delectus, quaerat rerum.</p>
|
| </div>
|
| </div>
|
|
|
| <div class="contentBx">
|
| <div class="label">List Four</div>
|
| <div class="content">
|
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Amet impedit atque animi aspernatur at minus velit. Autem et, tenetur corrupti ab praesentium quaerat corporis similique, magni sed quisquam eos distinctio suscipit pariatur incidunt dignissimos molestias expedita quidem culpa neque delectus reprehenderit voluptas nostrum veritatis. At ipsa nostrum cum voluptate, inventore obcaecati earum soluta debitis numquam ab, fugit atque doloremque sed neque assumenda reprehenderit necessitatibus fugiat ducimus accusantium quasi velit! Unde, sed quia recusandae repudiandae sint provident excepturi cupiditate facere, at beatae, atque nisi quo dolor ut iusto fuga! Architecto dolores magni corporis odio ducimus animi laudantium tenetur, tempora mollitia possimus ea, ipsa nihil repudiandae maiores nisi veniam commodi consequatur facilis reiciendis non amet! Est reiciendis ducimus eaque impedit eum, culpa alias fuga delectus, quaerat rerum.</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </body>
|
| </html>
|
|
|
| <script type="text/javascript">
|
| const accordion = document.getElementsByClassName('contentBx');
|
|
|
| for (i = 0; i<accordion.length; i++ ){
|
| accordion[i].addEventListener('click', function(){
|
| this.classList.toggle('active')
|
| })
|
| }
|
| </script>
|
|
|
| <style type="text/css">
|
| *{
|
| margin: 0px;
|
| padding: 0px;
|
| box-sizing: border-box;
|
| font-family: "arial";
|
| }
|
| body{
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| min-height: 100vh;
|
| background-color: #bedfe8;
|
| }
|
| .accordion{
|
| max-width: 800px;
|
| }
|
| .accordion .contentBx{
|
| position: relative;
|
| margin: 10px 20px;
|
| }
|
| .accordion .contentBx .label{
|
| position: relative;
|
| padding: 10px;
|
| background-color: #2694af;
|
| color: #fff;
|
| cursor: pointer;
|
| }
|
| .accordion .contentBx .label::before{
|
| content: '+';
|
| position: absolute;
|
| top: 50%;
|
| right: 20px;
|
| transform: translateY(-50%);
|
| font-size: 1.5em;
|
| }
|
|
|
| .accordion .contentBx.active .label::before{
|
| content: '-';
|
| }
|
| .accordion .contentBx .content{
|
| position: relative;
|
| background-color: #fff;
|
| height: 0px;
|
| overflow: hidden;
|
| transition: 0.5s;
|
| overflow-y: auto;
|
| }
|
|
|
| .accordion .contentBx.active .content{
|
| height: 150px;
|
| padding: 10px;
|
| }
|
| </style> |
Comments
Post a Comment