"else" is not working on my Jquery code with slideToggle

user_9502914 0
Viewed 81

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

    $("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()
        };
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

if-statement css html jquery javascript
2 Answers

Try storing the state of .answer elements css display attribute, before calling the .slideToggle() method and use this stored state to hide/display your arrow images:

$("img.up").hide();

$(".question h3").click(function(){

    var b = $(this);

    var a = b.parent(".question").children(".answer");

    // Store isVisible state for answer element before ..
    var isVisible = a.css('display') == 'block';

    // ..you call slideToggle()
    a.slideToggle();
     
    if(isVisible){
        b.children("img.down").hide();
        b.children("img.up").show()
    } else {
        b.children("img.up").hide();
        b.children("img.down").show()
    };

});
img {
  width:1rem;
  height:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="question">
    <h3>
        А я могу ездить на Mercedes S-Class без прав?
            <img src="https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png" alt="" class="down">
            <img src="https://openclipart.org/image/2400px/svg_to_png/154969/1313159942.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>

The reason for storing this is that slideToggle() will immediately sets the display of the answer to block, regardless of the animation (either to close, or open). For this reason, you need to determine if the answer is visible before animating the answer div (via the call to slideToggle()), so that you can use that state to control which up/down arrow is shown/hidden.

Here's an updated working jsFiddle for you to see :)

user_85267050

Here is the solution to your problem. I have added

 $('h3 img').toggle();

which will toggle the image accordingly.

Below is the working code.

$("img.down").hide();

$(".question h3").click(function(){

    var b = $(this);

    var a = b.parent(".question").children(".answer");

    a.slideToggle();

   $('h3 img').toggle();
    
    

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
    <h3>
        А я могу ездить на Mercedes S-Class без прав?
            <img src="img/icons/down.png" alt="down" class="down">
            <img src="img/icons/up.png" alt="up" 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>

user_74028440
Related