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>
			<button type="button" onclick="open_close()" class="open_one">read more</button>
		</article>
</div>
When I click on the button it fires this function:

Code:
function open_close(){
  var txt = $("button.open_one").text();
  if(txt === "read more"){                  
$("p.less").removeClass("less").addClass("more");
$("button.open_one").text("close");                            
  }
  else
  {
$("p.more").removeClass("more").addClass("less");
$("button.open_one").text("read more");
  }  
  }
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>
			<button type="button" onclick="open_close()" class="open_one">read more</button>
		</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>
			<button type="button" onclick="open_close()" class="open_one">read more</button>
		</article>
</div>
When I do THIS..it breaks. No errors that I can see, but nothing happens. I'm starting to think it has to do with the jQuery selector...but I'm not sure.