Question: My html page content is below

```
<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

```

Details content is collapsed initially. When user clicks the Read More button, I need to show details content. I can make it possible. i will define id for details div tag and javascript for onclick event of button. Using id i will change the div style display. 

But i have multiple list of sections based on the back end data. so my page would be renderd like below

```
<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div style="display:none">
        Details 2
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div style="display:none">
        Details 3
    </div>
    <button>Read More</button>
</div>

```

Now How can i acheive the expand and collapse functionality when Read More button is clicked.

Answer: 
By using jQuery [**.prev()**](http://api.jquery.com/prev/) you may achieve it easily.

```
$('button').on('click', function(e){
   $(this).prev('div').toggle();
});

```

[DEMO](http://jsfiddle.net/P7Aa9/)
----------------------------------
Here it is how you do it using jquery:

The HTML code:

```
<div class="stuff">
<dl id="faq">
    <dt>What shouldn't I do to the bird?</dt>
    <dd>Never try to treat a fracture at home.</dd>
</div>

```

The JQuery code:

```
jQuery(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function(){
       $(this).next().slideToggle();
   });
});

```