Need Help In JQuery

[Mottie]

You shouldn’t need jQuery for this. Try this css instead

@media(max-width: 768px){
  .folloter-li-box1 { display:none;}
}

http://codepen.io/Mottie/pen/JXgBgp

[Anshu]

Thank You Mottie,
I have 15 sub-links under About Us & Contact Us so i need open close tabs in mobile view.

[Anshu]

Hello Dipesh, Amanda_
Tried you script in my code:

CODE:

<div>
<h3>Company Info</h3>
<div>
<ul>
<li><a href="#" title="#">Link1</a></li>
<li><a href="#" title="#">Link2</a></li>
<li><a href="#" title="#">Link3</a></li>
<li><a href="#" title="#">Link4</a></li>
</ul>
</div>
<h3>Contact Info</h3>
<div>
<ul>
<li><a href="#" title="">Link1</a></li>
<li><a href="#" title="">Link2</a></li>
</ul>
</div>
</div>

Script:

  <script type="text/javascript">

$(document).ready(function() {
  //footer toggle content
  var wd = $(window).width() ;

  $('.large--three-twelfths h3').click(function() {

    if (wd <= 767) {
      $(this).next('.large--three-twelfths .folloter-li-box1').slideToggle();
      $(this).toggleClass('active');
    }
  });
});

</script>

CSS:

.folloter-li-box1 { display:none;} 

Result:

Desktop view: as per above class links under h3 are not appearing. I have also tried CSS for different resolutions.’
Mobile View: Links under h3 are not appearing same as desktop view. no event when i click on h3. but when i refresh screen. its (toggle) working fine.

I only need toggle effect on mobile view (<767px).

[Author]

Posts