CODEWITHSUNDEEP
jqueryhtmlcss
tigerpet15
tigerpet15

Reputation: 1

jQuery slidetoggle rotation animation

I have problematic jQuery function. I want to have a slidetoggle which will animate rotation of an arrow next to slide toggle text. Now arrow rotation animation is played only the first time ant also its not animating rotation back (while is slidetoggle closing)

I am starting with web programming and I cant find answer for my question so i will be glad for every help.

That arrow is not rotating back while is the list closing

$(1.2.html).ready(function() {
  $("click").click(function() {
    $("ul").slideToggle("slow");
    $(".arrow").animate({
      deg: 180,
    }, {
      speed: "slow",
      step: function(now) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        })
      }
    });
  })
});
.arrow {
  float: right;
}

p {
  float: left;
}

ul {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="click">
    <p>Toggle</p>
    <img class="arrow">
  </div>
  <ul>
    <li>hidden1</li>
    <li>hidden2</li>
  </ul>
</div>

Upvotes: 0

Views: 229

Answers (1)

Emmanuel
Emmanuel

Reputation: 447

$('document').ready(function() {
  $(".click").click(function() {
    $("ul").slideToggle("slow");
    $('.arrow').toggleClass('goLeft')
  })
});
.arrow {
  float: right;
   transition : all 0.8s ease-in
}

p {
  float: left;
}

ul {
  display: none;
}
.goLeft {
  -webkit-transform:rotate(180deg);
   transition : all 0.8s ease-in
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="click">
    <p>Toggle</p>
    <img class="arrow" src="https://img.icons8.com/carbon-copy/2x/arrow.png">
  </div>
  <ul>
    <li>hidden1</li>
    <li>hidden2</li>
  </ul>
</div>

This does it for you, also on codepen https://codepen.io/abeshi-emmanuel/pen/eYOZREY

Upvotes: 1

Related Questions