jtv_24 jtv_24 - 4 months ago 13
CSS Question

How can I add read more click event to only open one news article?

I created a section on a website where news articles are posted, but each one has a "Read More" button to open up the rest of the article rather than have it all loaded at once. Here is my code below...

HTML

<h1>Title</h1>
<p>Author</p>
<p>Visible Content</p>
<div class="continue-article">
<p>Hidden Content</p>
</div>
<p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
<p>Author</p>
<p>Visible Content</p>
<div class="continue-article">
<p>Hidden Content</p>
</div>
<p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
<p>Author</p>
<p>Visible Content</p>
<div class="continue-article">
<p>Hidden Content</p>
</div>
<p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>


jQuery

$('.read-toggle').click(function(){
if($('.continue-article').hasClass('show')){
$('.continue-article').removeClass('show');
$(this).children('span').text('Read More');
$(this).children('.fa').removeClass('fa-caret-up').addClass('fa-caret-down');
}else{
$('.continue-article').addClass('show');
$(this).children('span').text('Close');
$(this).children('.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
}
});


CSS

.continue-article {display: none;}
.show {display: block;}
.read-toggle {font-weight: bold;}
.read-toggle:hover {cursor: pointer;}


The issue I am having is that when one is clicked on they all open, when I only want that particular "Read More" that was clicked on to be visible.

How can I set it up so that only the one that has been clicked on will show and change rather than all of them?

Answer

It opens all your "Read more"s, because in JS you select all $('.continue-article') elements.

You have to select only preceding one.

$('.read-toggle').click(function() {
    if($(this).prev('.continue-article').hasClass('show')) {
        $(this).prev('.continue-article').removeClass('show');
        $(this).children('span').text('Read More');
        $(this).children('.fa').removeClass('fa-caret-up').addClass('fa-caret-down');
        
    } else {
        $(this).prev('.continue-article').addClass('show');
        $(this).children('span').text('Close');
        $(this).children('.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
        }
});
.continue-article {display: none;}
.show {display: block;}
.read-toggle {font-weight: bold;}
    .read-toggle:hover {cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>

Comments