CODEWITHSUNDEEP
javascriptjqueryhtml
None
None

Reputation: 5670

make child ul slide-down on page load

My HTML is like this

<div id="cssmenu">
<ul>
    <li class="has-sub open ">
        <a href="/rigging.aspx " >  rig </a>
        <ul>
            <li class="has-sub ">
                <a href="/rigging/rigging.aspx">  rigging  </a>                   
            </li>
            <li class="has-sub ">
                <a href="/rigging/rigging.aspx">rig-3 </a>
            </li>                
        </ul>
    </li>    
</ul>

on page load if any <li> has class open I want its child <ul> element to be slide down. I have written something like this

    $(document).ready(function () {
    if ($('#cssmenu li').hasClass('open')) {
        $(this).children('ul').slideDown();        
    }
}

But its not working (slide down not happens) can any one point out what I am missing here?

Upvotes: 0

Views: 90

Answers (1)

Dhiraj
Dhiraj

Reputation: 33628

This selects all ul children of li which have the class .open and applies slideDown.

$('#cssmenu li.open > ul').slideDown();


$('li.has-sub > ul').slideDown();
.has-sub > ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="has-sub open ">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
  <li class="has-sub open ">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions