CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shyama
shyama

Reputation: 331

Jquery Slide up and Slide down -first li always slide down

i have nested ul li list

  • Dental
    • Isolation Materials
      • Pulp Devitalizer
      • Etchants
    • Orthodontics
    • Dental Medicines
  • Oral

    • Using the following html

    <ul class="nav" id="product-cat-menu">
<li>
    <span class="right-plus main-plus"><i class="fa fa-plus-square-o"></i></span>Dental
    <ul>
      <li>
        <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Isolation Materials
        <ul>
          <li>Pulp Devitalizer</li>
          <li>Etchants</li>
        </ul>
      </li>
      <li>
        Orthodontics
      </li>
      <li>
         <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Dental Medicines
      </li>
    </ul>
   </li>
   <li>
     Oral
   </li>


    #product-cat-menu ul{
display: none;
}

    And i am using the following jquery for slide up and slide down the list is

    $(document).ready(function () {       
$("#product-cat-menu .right-plus").click(function (evt) {
    var $this = $(this);        
    $this.closest('li').siblings().find('ul').slideUp();       
    $this.siblings().slideDown();
    $this.find('i').removeClass("fa-plus-square-o");        
    $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
    evt.preventDefault();        
});    
});

    This is working perfectly... but actualy i need, the first li always slide down when page load. How it possible

    Upvotes: 0

    Views: 625

    Answers (3)

    Cerlin
    Cerlin

    Reputation: 6722

    add .first().click() after the click event

    the final code will look like

    $(document).ready(function () {       
    $("#product-cat-menu .right-plus").click(function (evt) {
        var $this = $(this);        
        $this.closest('li').siblings().find('ul').slideUp();       
        $this.siblings().slideDown();
        $this.find('i').removeClass("fa-plus-square-o");        
        $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
        evt.preventDefault();        
    }).first().click(); // new line
});

    Upvotes: 0

    Sandeeproop
    Sandeeproop

    Reputation: 1776

    You can achieve this by adding following line your code

    $(document).ready(function () {       
  $("#product-cat-menu .right-plus").click(function (evt) {
     //your code
  });    
  $("#product-cat-menu .right-plus").eq(0).click();
});

    Upvotes: 1

    Milind Anantwar
    Milind Anantwar

    Reputation: 82241

    You can trigger the click event for first span using:

     $("#product-cat-menu .right-plus:first").click();

    Upvotes: 3

    Related Questions