How to collapse/expand list using bootstrap/jquery
css, javascript, jquery, twitter-bootstrap
Solution
-Edit-
Updated plunk to reflect OP's provided screen-shots -> plunk
OP,
Is http://plnkr.co/edit/2PUiNqdQKLsBVhyeKLtm?p=preview what you're looking to do?
User clicks button -> toggles other element on/off -> toggle the button's icon `icon-folder-open` / `icon-folder-close`.
Problem
I just started working with twitter-bootstrap In my website, I want to toggle a list containing folder's content like this: when clicked on `<i class="icon-folder-open">` it should toggle to `<i class="icon-folder-close">` and it should hide item 1 and item 2 Here is my initial code which shows folder-open icon and all items in that folder. ``` <a href="#"><i class="icon-folder-open"></i></a> Item in folder</li> <ul>item 1</ul> <ul>item 2</ul> ``` I want to add screenshot for more clarity, but cannot find a way to put it here. Let me know if question is not clear, I will try to explain more. I know there could be millions of way to do it. I am looking for something small and efficient and within bootstrap/jQuery realm. Here is screenshot when it is open http://i47.tinypic.com/2dj5ok6.png And when it is closed http://i49.tinypic.com/1dzlna.png