HTML <details> tag does not work in IE/Edge

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.