JSFiddle - React, Tailwind, and code Playground

by Greg Bowler

HTML

<ul>
    <li id="0">
       <a class="synth-faq-trigger" href="#0">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for one</p>
         </div> <!-- synth-faq-content -->
     </li>
    <li id="1">
       <a class="synth-faq-trigger" href="#1">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for two</p>
         </div> <!-- synth-faq-content -->
     </li>
    <li id="2">
       <a class="synth-faq-trigger" href="#2">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for three</p>
         </div> <!-- synth-faq-content -->
     </li>
</ul>

CSS

ul {
    width: 320px;
}
li {
    background: #aaf;
}

li.content-visible::before {
    content: "visible";
}

.synth-faq-content {
    overflow: hidden;
    height: 0;
    transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
    height: 3em;
}

JavaScript

window.addEventListener("hashchange", function(e) {
    // Remove all .content-visible elements:
    [].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
        li.classList.remove("content-visible");
    });
                    
    // Add .content-visible to the li that contains the clicked anchor:
    document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});