jQuery toggle dropdown not working

Question

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.

Up to now I have some code like this: JSFiddle

$(".row-span").click(function(){
$("#expandDropDown").toggleClass('drop');
$("#quantitySelectDrop").toggleClass('active');
$(".mCSB_container").mCustomerScrollbar();
$(".active-result").hover(function(){
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');})})

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.

My expected outcome should be like this:

But I cannot push the dropdown meun from -9000px to 0px in order to make it display.

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.

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!!

cjl750 · Accepted Answer · 2017-01-26T20:09:47.383

Okay, a couple things going on here.

Didn't enable jQuery in the JavaScript settings, so you were getting "$ is not a function" errors
Code was inconsistent in spelling. Some places said "quality," other places said "quantity." Also, some places said "select," other places said "selector."

EDIT: I forgot to mention that I also moved your inline styles to the stylesheet. You may have a hard time getting your classes to override inline styles, so I would do that if you can. If not, you can try !important or using the jQuery .css() property to toggle styles, instead of toggling classes.

Abbreviated jQuery that you can expand on as you need:

$(function(){
  $('#expandDropDown').click(function(){
     $('#qualitySelectorDrop').toggleClass('active');
     $("#expandDropDown").toggleClass('drop');
  });
});

#expandDropDown {
  color: blue;
}
#expandDropDown.drop{
  /*changing the selector arrow from down to up*/
  color: red;
}
.active-result.highlighted{
  background-color:red;
}
.mCustomScrollbar {
  width: 38px;
  position: absolute;
  left: -9000px;
}
.mCustomScrollbar.active {
  left: 0;
}
#qualitySelectorDrop {
  left: -9000px;
  width: 59px;
  top: 29px;
  height: 100px;
  background: blue;
  position: absolute;
}
#qualitySelectorDrop.active {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="row-span" id="expandDropDown" style="width:61px;">
    <span>Please Select</span>
  <!-- <div><b></b></div> -->
  </a>  
</div>

<div class="drop-row" id="qualitySelectorDrop">
  <div class="drop-search">
    <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1">
      <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
        <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"></div>
          <li class="active-result">1</li>
          <li class="active-result">2</li>
          <li class="active-result">3</li>
          <li class="active-result">4</li>
          <li class="active-result">5</li>
          <li class="active-result">6</li>
          <li class="active-result">7</li>
          <li class="active-result">8</li>
        </div>

      <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;">
      <div class="mCSB_draggerContainer">
        <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;">
          <div class="mCSB_dragger_bar" style="line-height:30px"></div>
            <div class="mCSB_draggerRail"></div>
          </div>
         </div>
      </div>
    </ul>
  </div>
</div>

Working fiddle is here: https://jsfiddle.net/59y9jaef/4/

score 2 · Answer 2 · answered Jan 26 '17 at 21:23

JS Fiddle Code is here

This is working fiddle. You were applying wrong style as position:-900px and tried to apply and tried to toggle with class name. Didn't link JQuery JS file in your fiddle.

HTML: Please Select

<div class="drop-row" id="qualitySelectorDrop" >

<div class="drop-search">
 <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1" style="width:38px; position:absolute; top:20px; left:0">
  <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
  <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;">
  </div>
  <li class="active-result">1</li>
  <li class="active-result">2</li>
  <li class="active-result">3</li>
  <li class="active-result">4</li>
  <li class="active-result">5</li>
  <li class="active-result">6</li>
  <li class="active-result">7</li>
  <li class="active-result">8</li>

  </div>

  <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;">
  <div class="mCSB_draggerContainer">
   <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;">
   <div class="mCSB_dragger_bar" style="line-height:30px">
    </div>

    <div class="mCSB_draggerRail"></div>

    </div>
  </div>
  </div>

  </ul>
</div>
</div>

JavaScript:

 $(".row-span").click(function(){
//$("#expandDropDown").toggle('drop');
 $("#quantitySelectDrop").toggle();
 $('.drop-row').toggle();
 $(".mCSB_container").mCustomerScrollbar();

 $(".active-result").hover(function(){
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');
})
 })

CSS:

#quantitySelectDrop.active{
 left:0px;
}

#quantitySelectDrop{
position:relative; display:none
}

.active-result.highlighted{
  background-color:red;
 }

 .drop-search{height:200px; display:block; width:500px}

jQuery toggle dropdown not working

2 Answers2