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