Question

I am generating a news section with php and I want to make continue reading like blog posts. When a user clicks continue reading i will make all the news article slide down.
Here is the code I have:

<?php foreach ($news as $newsItem) : ?>
    <div class="news-item" id="news-<?php echo $newsItem->id; ?>">
        <a href="#" class="image"><img src="/path/to/my/image" 
            alt="<?php echo $newsItem->photo; ?>" /></a>
        <h4><a><?php echo $newsItem->title; ?></a></h4>
        <p><?php echo $newsItem->content; ?></p>
        <a class="read-more" href="<?php echo ROOT_PATH; ?>front/site/news">Read more</a>
    </div>
<?php endforeach; ?>

---

$('body').on('click', 'a.read-more', function(){
    // what should happen here?
})

Answer 1

First, your jQuery snippet should look like:

$(function() { // Only when DOM is ready
  $('a.read-more').on('click', function() {
    // Your code
  }
});

Then, you need to decide whether you use lazy-loading of content or not. Two solutions :

1. You simply load the whole article and hide the read-more section on page load.
2. You use AJAX to load content from your database (using your news id)