Widget:TestTabs

<style> details div {

   border-left: 2px solid #000;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   padding: 1.5em;

}

details div > * + * {

   margin-top: 1.5em;

}

details + details {

   margin-top: .5rem;

}

summary {

   list-style: none;

}

summary::-webkit-details-marker {

   display: none;

}

summary {

   border: 2px solid #000;
   padding: .75em 1em;
   cursor: pointer;
   position: relative;
   padding-left: calc(1.75rem + .75rem + .75rem);

}

summary:before {

   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: .75rem;
   content: "↓";
   width: 1.75rem;
   height: 1.75rem;
   background-color: #000;
   color: #FFF;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;

}

details[open] summary {

   background-color: #eee;

}

details[open] summary:before {

   content: "+";

}

summary:hover {

   background-color: #eee;

} </style> <details open>

 <summary>How do you maen create an accordion?</summary>

   Easy! As long as you don't have to support IE11 or older browsers you could use <details> and <summary> natively.

</details> <details>

       <summary>
           What if I have to support IE11 or older browsers?
       </summary>

           No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.

   </details>
   <details>
       <summary>
           What type of content can I have inside one of these?
       </summary>

           Almost anything you'd like. The <details> element allows all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content" target="_blank">flow content</a>, which is basically everything.

   </details>
   <details>
       <summary>
           How does it work?
       </summary>

           The <details> element encapsulates the <summary> element. The <summary> becomes the 'label' for the <details> and acts like a button. When clicked, the attribute open is added to the <details> element, making it display. You can therefore style the open and closed states seperately if you'd like.

</details>