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/)
----------------------------------
You can try this with jquery

```
<button class="readmore">Read More</button>

```

jQuery

```
$('.readmore').click(function(){
   $(this).prev().show();
});

```