Last Updated: December 26, 2018
·
5.16K
· leethelobster

Accordion List Plus More - jQuery

CHALLENGE (thanks <a href="https://twitter.com/pgerochi">@pgerochi</a>)
Make a list of 4 items. When you click on an item, another list slides down underneath. When you click on an item on the list that slided down, the text of the original list item will change depending on what you clicked on the slided down list. Ugh - I can't explain it properly in words. Just check out the demo! :)

HTML

<div class="c">
<ul>
  <li><span>one</span>
    <ul>
      <li>one-one</li>
      <li>one-two</li>
      <li>one-three</li>
      <li>one-four</li>
    </ul>
  </li>
  <li><span>two</span>
    <ul>
      <li>two-one</li>
      <li>two-two</li>
      <li>two-three</li>
      <li>two-four</li>
    </ul>
  </li>
  <li><span>three</span>
    <ul>
      <li>three-one</li>
      <li>three-two</li>
      <li>three-three</li>
      <li>three-four</li>
    </ul>
  </li>
  <li><span>four</span>
    <ul>
      <li>four-one</li>
      <li>four-two</li>
      <li>four-three</li>
      <li>four-four</li>
    </ul>
  </li>
</ul>
</div>​

CSS

.c {
  position: relative;
  width: 100%;
  top: 20px;
  left: 20px;
}
ul {
  font-family: arial;
}
li {
  cursor: pointer;
}
ul ul {
  display: none;
}
ul > li {
  color: blue;
}
ul li ul li {
  color: orange;
  padding-left: 10px;
}


jQuery

$(document).ready(function() {
    $('ul li').click(function(e) {
      $('ul li ul').slideUp();
      $(this).children('ul').slideDown();
    });
    $('ul li ul li').click(function(e) {
      var newText = $(this).text();
      $(this).parents('li').find('span').text(newText);
      e.stopPropagation();
    });
});​

DEMO
http://jsfiddle.net/leethelobster/VkZNH/