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();
});
});
Written by Joanna Ong
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Lists
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#