[SOLVED] Make ordered list collapsible

Make ordered list collapsible

I have an ordered list which i want to make collapsible by default and expandable when user click on the link.

How can I make it work so that it works properly

With following script it collapses all Parent item then fails to open them properly.

$(window).load(function() {
  prepareList();
});

function prepareList() {
  $('#expList').find('li:has(ol)')
  .click(function(event) {
    if (this == event.target) {
      $(this).toggleClass('expanded');
      $(this).children('ol').toggle('medium');
    }
    return false;
  })
  .addClass('collapsed')
  .children('ol').hide();

  //Create the button funtionality
  $('#expandList')
  .unbind('click')
  .click(function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
  })
  $('#collapseList')
  .unbind('click')
  .click(function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
  });
};

.page-left-bar {
  width: 200px;
  background-color: #fff;
}

ol {
  margin-left: 0px;
  padding-left: 20px;
}

.handbook-page ol {
  color: #687074;
  counter-reset: item;
}

ol {
  counter-reset: item;
  color: #687074;
}

ol li {
  display: block;
  padding: 5px 0;
}

ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}

ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>LIST OL  child list alignment</h1>
<div class="page-left-bar">
  <ol id='#expList'>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a>
      <ol>
        <li><a href="#home">Sub menu</a></li>
        <li><a href="#news">Sub menu long name</a></li>
        <li><a href="#contact">Sub menu</a></li>
        <li><a href="#about">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#about">About </a>
      <ol>
        <li><a href="#home">Mission</a></li>
        <li><a href="#news">Vision</a></li>
        <li><a href="#contact">Sub menu</a></li>
        <li><a href="#about">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

Solution

If you want to toggle the visibility of your submenus. First remove the # from the id #expList in your HTML as @MoshFeu said.

<ol id='expList'>

Then you can simply do it like this.

$(document).ready(function(){
  $("#expList").find("ol").hide();

  $("#expList > li").click(function(){
    $(this).find("ol").slideToggle();
  });
});

See this fiddle