Geek asks and answers

JQuery - Show only the first paragraph of each article

I have a page that will be used to display news.

<article>

<h4>News Article One</h4>
<h5>25th December 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

<article>

<h4>News Article Two</h4>
<h5>25th January 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

I want only the first paragraph of each article to be displayed and that the rest of the parts, only for this article, be visible when you click the read more link.

I am currently using this:

<script>
$(document).ready(function() {
 $('article p').eq(1).hide();
 $('a.more').click(function() {
  $('article p').eq(1).show();
  $(this).hide();
  return false;
 });
});
</script>

However, the above only works for the first articles, the first paragraph, and I would like it to work for all articles, the first paragraphs.

All time and help are appreciated.

thank

+3
source share
5 answers
$('article').each(function(){ $(this).find('p:not(:first)').hide()});

Here is the working jsFiddle: http://jsfiddle.net/fdp5L/1/

Here is an example with link extension for each article: http://jsfiddle.net/fdp5L/5/

HTML:

<article>
    <p>first 1</p>
    <p>second 1</p>
    <p>third 1</p>
    <p>fourth 1</p>
    <div class="more">more...</div>
</article>
<article>
    <p>first 2</p>
    <p>second 2</p>
    <p>third 2</p>
    <p>fourth 2</p>
    <div class="more">more...</div>
</article>

JavaScript:

$('article').each(function(){ $(this).find('p:not(:first)').hide()});
$('.more').on('click', function(){
    $(this).hide().closest('article').find('p').show();    
})
+5
source 
$('article').each(function() {
 $('p:eq(1)', this).hide();
});


$('p:eq(1)', $('article')).hide();


$('p:gt(0)', $('article')).hide();


$('p:not(:first)', $('article')).hide();

.more

$('a.more').click(function() {
  $('p:eq(1)', $('article')).show();
  $(this).hide();
  return false;
});

a.more article, :

$('a.more').click(function(e) {
  e.preventDefault();
  $('p:eq(1)', $(this).parent()).show();
  $(this).hide();
});

, :

 $('a.more').click(function(e) {
    e.preventDefault();  
    $(this).closest("article").find("p:eq(1)").show();
    item.hide();
 });
+1

:

$(function() {


  $("article").each(function() {

    // hide all second paragraphs
    $(this).find("p:not(:first)").hide();
    // add read more links
    $(this).find("p:visible").append("<p><a href='#' class='read-more'>read more</a></p>"); 

  });

  $(".read-more").click(function() {

    // show the hided paragraph
    $(this).closest("article").find("p").fadeIn();
    // hide the read more link
    $(this).hide();

  });

});

JsBin

+1
source

Give it a try

$('p:eq(1)', $('article')).hide();

Full code:

$(document).ready(function() {
    $('p:eq(1)', $('article')).hide();

    $('a.more').click(function() {
        $('p:eq(1)', $('article')).show();
        $(this).hide();
        return false;
    });
});

Demo

+1
source

I assume that you want to show all Para, except the first, and show the rest when you click on the more button / link. It will do

$(document).ready(function() {
    $('article p').hide();
    var articles=$('article');
    $.each(articles,function(){
        $(this).find("p").first().show();
    });

 $('a.more').click(function(e) {
    e.preventDefault();  
    var item=$(this);
    item.closest("article").find("p").show();
    item.hide();
   return false;
 });
});

Assuming you have a tag with a class moreinside an article element.

Working demo http://jsfiddle.net/jtQ5b/22/

0
source

More articles:


All Articles