JS Accordion Funktion mit Container

Guten Tag, zuerst sei schon einmal gesagt ich bin ein Anfänger und versuche zu lernen.

Ich versuche mich seit kurzem an Bootstrap und JavaScript. Ich habe so gut wie keine Foren Erfahrung also penetriert mich nicht direkt.

Ich versuche eine Accordion Funktion nachzubauen, bei der ich auf ein Bild klicke und der container darunter eingeblendet wird, sprich er sollte am Anfang schon ausgeblendet sein.

Gibt es eine Möglichkeit die Klasse "closed" umzuändern zu "open" ?

Oder gibt es eine andere Smoothe Variante um Zusatzinformationen ein/auszuklappen?

Folgendes ist gegeben:

-------------------HTML----------------
<div class="py-5">
    <div class="container">        
        <a href="#!"><img src="..." alt="" /></a>    
    </div>
    <div class="container closed">
        <div class="text">
            <p></p>
            <img/>
        </div>
    </div>
</div>

-------------------CSS----------------
.container.closed {  display: none ;}
.container.open {  display: block !important;}


-------------------JS----------------
$(document).ready(function(){
    $(".py-5 .container a").click(function(){ 
        [?]
    });
});

Vielen Dank, auch wenn verspätet.

Ich bin erst jetzt dazu gekommen das von dir gepostete bei mir einzubinden. Hat super geklappt!

Allerdings ist mir nun aufgefallen, wenn ich der ID "collapseExample" noch ein Padding oben und unten gebe, schließt es sich nicht mehr so flüssig wie ohne das Padding. Kann ich dies irgendwie beheben?

Ah ja, den div hatte ich übereifrig rausgenommen. Statt einem Padding habe ich dem .card.card-body nun ein margin gegeben.

Grenzt das ganze etwas ab und schließen tut es sich nun auch flüssig. Vielen lieben Dank für deine Hilfe!