Collapsible example

by dirkjf

HTML

<script src="https://unpkg.com/@dirkjf/collapsible@3.0.2/dist/scripts/collapsible.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@dirkjf/collapsible@3.0.2/dist/styles/collapsible.min.css">
<button data-collapsible-target="collapsible-one">Toggle me</button>
<div class="collapsible-one">
  Basic, single collapsible.
</div>

<div class="accordion">
  <a data-collapsible-target="collapsible-ac-one">These will close</a>
  <div class="collapsible-ac-one" data-close-on-click-outside>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo in vitae turpis massa sed elementum. Leo vel orci porta non pulvinar neque. Bibendum neque egestas congue quisque egestas. Augue neque gravida in fermentum. Elementum eu facilisis sed odio.
    </div>
  </div>
  <a data-collapsible-target="collapsible-ac-two">When you click elsewhere</a>
  <div class="collapsible-ac-two" data-close-on-click-outside>
    <div class="content">
      Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Fermentum posuere urna nec tincidunt praesent semper. In hac habitasse platea dictumst vestibulum rhoncus. In hac habitasse platea dictumst vestibulum. Iaculis urna id volutpat lacus laoreet non curabitur. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Fermentum posuere urna nec tincidunt praesent.
    </div>
  </div>
  <a data-collapsible-target="collapsible-ac-three">Try it!</a>
  <div class="collapsible-ac-three" data-close-on-click-outside>
    <div class="content">
      Porta nibh venenatis cras sed felis eget. Donec ultrices tincidunt arcu non sodales neque sodales ut. Ullamcorper malesuada proin libero nunc. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Interdum posuere lorem ipsum dolor sit amet consectetur. Dictum fusce ut placerat orci nulla.</div>
  </div>
</div>


<button...

SCSS

.accordion {
  margin: 40px 0;
  
  a {
    background-color: green;
    color: white;
    display: block;
    cursor: pointer;
    padding: 0.6em 1em;
    
    &:not(:last-of-type) {
    border-bottom: 1px solid darkgreen;
}
  }
  
  [class^=collapsible]{
    background-color: #E0E0E0;
    
    .content{
      padding: 2em
    }
  }
}