Agfdhyk

I am trying to add additional toggleable section that user can show and hide.

My requirements:

• supported on major browsers (Opera, Chrome, Edge, IE11, Firefox, Safari on Mac)


• no javascript

And was thinking of using the <details> tag, however the code

<details>

  <summary>Toggle</summary>

  <p>Hideable</p>

</details>

does not work on the Edge / IE browsers.

Can I anyhow "make" it work, or is there anything else I can use for that task? Hacks are OK, as long as no javascript is present.

This would be the suggested :checked method utilizing a hidden checkbox:

.toggler {

  display: none;

}



.toggler+.toggler-content {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: all .4s ease-in-out;

}



.toggler:checked+.toggler-content {

  max-height: 1000px;

  opacity: 1;

}

<div>

  <label for="toggler-id-1">Toggle</label>

  <input type="checkbox" id="toggler-id-1" class="toggler" />

  <div class="toggler-content">Hideable</div>

</div>

I would still prefer going with @Finesse's solution because it allows you to use the semantically correct HTML element for the purpose.

You can add a polyfill once on a page to make all the <details/>s on the page work:

<!-- Inside the body -->

<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

I know this is a JS solution but it doesn't require writing any JS for each individual <details/>. It can be used with a text written in a WYSIWYG editor.