JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="trigger2"><div id="toggle-image2">&nbsp;&nbsp;&nbsp;&nbsp;Page1</div></h3>
<div class="toggle-container2">hi</div>

<hr>

<h3 class="trigger"><div id="toggle-image">&nbsp;&nbsp;&nbsp;&nbsp;Page2</div></h3>
<div class="toggle-container">hi2</div>

CSS

div[class*='toggle-container'] {
    margin: 5px 15px; 
    background: yellow;  
}

JavaScript

$(document).ready(function(){
    var toggler = $('div[id*="toggle-image"]');
    toggler.attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $("div[class*='toggle-container']").hide();
    
    $("h3[class*='trigger']").click(function(){
        var toggler_inner = $(this).find(toggler);
        $(this).toggleClass("active").next().slideToggle("slow");
        if (toggler_inner.attr("class") == "toggle-image-collapse") {
            toggler_inner.attr("class", "toggle-image-expand");
        } 
        else {
            toggler_inner.attr("class", "toggle-image-collapse");
        }

    });
    
});