I have a section on my website, with Q/A blocks. If we click on question title (h3), it must appear answer hidden under the question.
So on the right side of question title, we have arrow down, and arrow up. As you might understand, it must be appeared arrow down when question is "closed", and arrow up when question is "open".
Here's my HTML
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="img/icons/down.png" alt="" class="down">
<img src="img/icons/up.png" alt="" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
So, here's my JS
$("img.up").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
a.slideToggle();
if(a.css('display') == 'block'){
b.children("img.down").hide();
b.children("img.up").show()
} else {
b.children("img.up").hide();
b.children("img.down").show()
};
});
Code works on first click, and ignores all next clicks. Else is not working. I know that it is easy but... Sometimes you can't do such a simple things
Aucun commentaire:
Enregistrer un commentaire