Rotate the arrow as menu is expanded instead of doing at the end of the animation

Question

As soon as I click the menu is expanded and then arrow is rotated. What I want is as soon as I click, menu should expand and arrow should rotate in parallel. How can I achieve that?

$(document).ready(function() {
  $(".r-product-page #menu > li > a").click(function() {
    $('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
    $(this).siblings("ul.sub-menu").slideToggle("slow", function() {
      if ($(this).parents('.product-menu').hasClass('active')) {
        $(this).parents('.product-menu').removeClass('active')
      } else $(this).parents('.product-menu').addClass('active');
    });
  });
  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })
});

.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}

.product-menu .dropdown-arrow {
  transition: transform .2s;
}

.product-menu.active .dropdown-arrow {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a>
        </li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a>
    </li>
    <li class="product-menu"><a href="#">Template D</a>
    </li>
    <li class="product-menu"><a href="#">Template E</a>
    </li>
    <li class="product-menu"><a href="#">Template F</a>
    </li>
  </ul>

  <div class="product-container" />
</div>

Answer 1

The issue is because you're toggling the class in the callback of the animation, so it happens when the animation ends. Simply move that logic in to the outer click event handler.

Also note that you can simplify the whole if condition by just calling toggleClass(). Try this:

$(document).ready(function() {
  $(".r-product-page #menu > li > a").click(function() {
    var $a = $(this);
    $('ul.sub-menu').not($a.siblings()).slideUp("slow").closest('.product-menu').removeClass('active');
    $a.closest('.product-menu').toggleClass('active');
    $a.siblings("ul.sub-menu").slideToggle("slow");
  });
  
  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })
});

.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}

.product-menu .dropdown-arrow {
  transition: transform .2s;
}

.product-menu.active .dropdown-arrow {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a></li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a></li>
    <li class="product-menu"><a href="#">Template D</a></li>
    <li class="product-menu"><a href="#">Template E</a></li>
    <li class="product-menu"><a href="#">Template F</a></li>
  </ul>

  <div class="product-container" />
</div>