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:
<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:
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:
<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.
