Expandable block when clicked : Recently, I start working on my project and faced with small problem.
I hava a list of notes, notes are the div blocks with code: 

    <div id="note" class="well">
        <p id="caption" class="text-center">%Caption</p>
        <hr id="devider">
        <p id="content">%Content</p>
    </div>
View on page:
[image][1]

Now, when I click on this note, nothing happens. I whant to make the next feature: in the ordinary state note has only a brief part of content, but when I click on certain note it increases in size and shows all content of note. How can I realize this feature?

  [1]: https://i.stack.imgur.com/aIgWf.png