toggle function works but not slideToggle in jQuery

69
June 16, 2019, at 1:50 PM

I'm trying to make the slideToggle work but couldn't figure out. As per different answers, I tried adding display: block and display: none but that isn't working either.

JSFiddle Demo: https://jsfiddle.net/987cndtv/

JS:

jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
  jQuery(this).next("ul").slideToggle();
  /* jQuery(this).next("ul").toggle(); */
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
  jQuery(this).find("img").toggleClass( "arrow" );
});

CSS:

.menupolicies .parent {
  padding: 5px 0;
  display: block;
}
.menupolicies .parent ul {
  display: none;
}
Answer 1

The issue is with the version (3.3.1.slim.min.js) of jQuery you are using which does not have the animation effect required in slideToggle(). Try with some other version:

jQuery(".menupolicies .parent ul").hide(); 
jQuery(".menupolicies>li>ul").show(); 
jQuery(".menupolicies .parent > span").click(function() { 
  jQuery(this).next("ul").slideToggle(); 
  //jQuery(this).next("ul").toggle();  
}); 
jQuery(".menupolicies .parent .nav-header").click(function(e) { 
  jQuery(this).find("img").toggleClass( "arrow" ); 
});
.hide { 
	display: none; 
} 
.menupolicies>li { 
  width: 100%; 
} 
.menupolicies .parent { 
  padding: 5px 0; 
  display: block; 
} 
.menupolicies .parent ul { 
  display: none; 
} 
.menupolicies a, .menupolicies li { 
  font-size: 14px; 
  color: #333; 
} 
.menupolicies .active { 
  font-weight: bold; 
} 
.nav { 
	margin-bottom: 0; 
  padding-left: 0; 
  list-style: none; 
} 
.menupolicies .parent span img { 
  width: 24px; 
  float: right; 
} 
.menupolicies .arrow { 
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="moduletable"> 
  <ul class="nav menupolicies"> 
    <li class="active deeper parent"><span class="nav-header hide">Market</span> 
    <ul class="nav-child unstyled small"> 
      <li class="deeper parent"><a href="/market/terms">Terms 1</a></li> 
      <li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span> 
        <ul class="nav-child unstyled small"> 
          <li class=""><a href="/market/terms/termsa">Terms A</a></li> 
          <li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span> 
            <ul class="nav-child unstyled small"> 
              <li class=""><a href="/market/terms/termsb/i">Terms I</a></li> 
              <li class="current active"><a href="/market/terms/termsa/ii">Terms II</a></li> 
              <li class=""><a href="/market/terms/termsa/iii">Terms III</a></li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
      <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span> 
        <ul class="nav-child unstyled small"> 
          <li class=""><a href="/market/terms3/i">Terms I</a></li> 
          </ul> 
          </li> 
        </ul> 
    </li> 
  </ul> 
</div>

READ ALSO
how to get substring length of sub array in javascript?

how to get substring length of sub array in javascript?

I am trying to solve this problem but I am not getting the expected output

46
How to order the order of returned API calls with generators?

How to order the order of returned API calls with generators?

I'm practicing some more advanced Javascript techniques, and came across generators and iterators as something I wanted to look intoI know that I'm doing this incorrectly, but I'm not really sure how to go about it

62
Why are elements in 3d rendering at the wrong size only at certain angles of perspective and rotation?

Why are elements in 3d rendering at the wrong size only at certain angles of perspective and rotation?

I'm trying to create a 3d hallway using css and react inline stylesThe function mimics a first-person perspective by translating and rotating the cuboid in relation to mouse position and arrow key inputs

44
How can I create an image overlay blend mode algorithm like on Photoshop?

How can I create an image overlay blend mode algorithm like on Photoshop?

I'm working on a code that should blend 2 images with each otherThe effect should be similar to Photoshop overlay blend mode or screen mode

64