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

<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>

Bonsoir Flexi, pour afficher/cacher une image dans l'accordéon avec Javascript, vous pouvez:

1. Ajouter une class "hidden" à l'image

2. Préciser en CSS que la classe "hidden" sera cachée (display: none)

3. En Javascript, utiliser toggleClass() pour ajouter/enlever la classe "hidden" lors de l'évènement souhaité

4. Ainsi, l'image sera affichée ou masquée en fonction de l'état de l'accordéon.

Bonjour nicolas

Merci pour la reponse 

j'ai fini par trouver

https://codepen.io/flexi2202/pen/bGjxZdZ