title: jQuery toggle dropdown not working
body: <p>I am creating a dropdown list with jQuery and toggle function, as I want the selector to be clickable with dropdown options displayed with a custom scrollbar.</p>
  
  <p>Up to now I have some code like this: <a href="https://jsfiddle.net/sammmmi/8bnp228g/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>$(".row-span").click(function(){
  $("#expandDropDown").toggleClass('drop');
  $("#quantitySelectDrop").toggleClass('active');
  $(".mCSB_container").mCustomerScrollbar();
  $(".active-result").hover(function(){
  $(this).toggleClass('highlighted').siblings().removeClass('highlighted');})})
  </code></pre>
  
  <p>When the div is clicked, a dropdown menu with various options will be display, at the same time, the arrow on the selector will be changing from down to up when it is clicked/toggled. When the mouse is hovering on the options, the background color of the options will become grey.</p>
  
  <p>My expected outcome should be like this: </p>
  
  <p><a href="https://i.stack.imgur.com/QqJlu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QqJlu.png" alt="Outcome"></a> </p>
  
  <p>But I cannot push the dropdown meun from -9000px to 0px in order to make it display.</p>
  
  <p>From the click function, I have included two toggle Classes to trigger the action. However, even the class of "active" is added to the div, the position of the drop down menu still have not changed and appeared.</p>
  
  <p>I am not sure if it is my logic error or I should not put two toggle classes under a click function. How can I trigger two toggle changes under the same on click function? Thank you!! </p>