How to collapse / expand a list using bootstrap / jquery

Question

I just started working with twitter-bootstrap

On my website, I want to switch the list containing the contents of the folder as follows: when I click on <i class="icon-folder-open"> it should switch to <i class="icon-folder-close"> and hide element 1 and paragraph 2

Here is my source code that shows the folder icon and all the items in this folder.

 <a href="#"><i class="icon-folder-open"></i></a>&nbsp;Item in folder</li> <ul>item 1</ul> <ul>item 2</ul> 

I want to add a screenshot for clarity, but I can not find a way to put it here. Let me know if the question is not clear, I will try to explain more.

I know that there can be millions of ways to do this. I am looking for something small and efficient in both the / jQuery download area.

Here is a screenshot when it is open.

http://i47.tinypic.com/2dj5ok6.png

And when it is closed

http://i49.tinypic.com/1dzlna.png

Answer 1

-Edit -

Updated plunk to reflect the OP provided by screenshots → plunk

---

O.P.,

Is http://plnkr.co/edit/2PUiNqdQKLsBVhyeKLtm?p=preview , what do you want to do?

User click button → Toggles another item on / off. → toggles the button icon-folder-open / icon-folder-close .

Answer 2

To avoid this problem, I used line-height for the p-element in li. So li with auto height give me the size I need.