j'ai fini par trouver

bonjour a tous
je reviens vers vous
car de nouveau je suis bloqué face a un petit detail

je souhaiterais afficher une image lorsque un des colets de mon accordeon s'ouvre

Sans savoir ce que je fais exactement j'ai donc ajoute une classe ville dans le menu accordeon
afin de pouvoir l'ecouter

je souhaiterais grace a cette ecoute asavoir si il est ouvert ou pas pour me permettre d'afficher une image sous l'accordeon

[code]
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;

}

</style>

<div id="faq_slide">
<div class="question" >First Question</div>
<div class="answer" name="ville">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

<img id="myImgaa" src="" width="107" height="98">


<script>

$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function () {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});


function myFunction() {
const ville = document.querySelector('[name="ville"]');
alert(ville);
if ( ($(this).next(".answer").is(":visible"))){
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
</script>

[/code]