JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
<div class="expando_content">
<h2> Beginner Versions
</h2>
<p>
 Test Beginner version
</p>
<h2 class="expand_all" href="#">Advanced Version</h2>

    <p class="answer">I'm an answer!</a>
        <p class="answer">Another answer</a>
            
           
        </p>
    </p>
</div>

<div class="expando_content">
<h2 class="expand_all" href="#">Advanced Version </h2>

    <p class="answer">I'm an answer! 2</a>
        <p class="answer">Another answer 2 </a>
            
            
        </p>
    </p>
</div>

</div>

CSS

.answer {
    display: none;
}

JavaScript

$(".expando_content").on("click", ".expand_all", function () {
    
    if (!$('.answer').is(':visible')) {
       /* $(this).text('Hide'); */
        $('.answer').each(function () {
            $(this).slideDown(150, function () {
                $(this).show();
            });
        });
    } else {
       /* $(this).text('Expand'); */
        $('.answer').each(function () {
            $(this).slideUp(150, function () {
                $(this).hide();
            });
        });
    }
});

$('<a class="expand_all" href="#">Switch to Advanced View</a>').appendTo($('#footer'));