## Collapsing DIV's to hide and expose text.

Hey guys,

Hope someone here can help me out. I've just started coding and javascript is the first language I've decided to tackle.

I figured I'd design a quick page to have fun stuff to try and challenge myself with, and I'm stuck. So here is what I've done...

I have a div with some text in it and a 'read more' button at the bottom. Like this:

Code:
```<div>
<article class="article">
<h1>
Test
</h1>
<p>
Text text text text text text text text text text.
Text text text text text text text text text text.
Text text text text text text text text text text.
</p>
<p class="less">
Extra text here. Extra text here. Extra text here.
Extra text here. Extra text here. Extra text here.
</p>
</article>
</div>```
When I click on the button it fires this function:

Code:
```function open_close(){
var txt = \$("button.open_one").text();
\$("button.open_one").text("close");
}
else
{
}
}```
Everything works great!!! Maybe not the best code or the most efficient way, but it works! Now...here's my problem. If I add a second block of text...another div block under the first...like this:

Code:
```<div>
<article class="article">
<h1>
Test
</h1>
<p>
Text text text text text text text text text text.
Text text text text text text text text text text.
Text text text text text text text text text text.
</p>
<p class="less">
Extra text here. Extra text here. Extra text here.
Extra text here. Extra text here. Extra text here.
</p>
</article>
</div>
<div>
<article class="article">
<h1>
Test
</h1>
<p>
Text text text text text text text text text text.
Text text text text text text text text text text.
Text text text text text text text text text text.
</p>
<p class="less">
Extra text here. Extra text here. Extra text here.
Extra text here. Extra text here. Extra text here.
</p>