CODEWITHSUNDEEP
jquery
user3851919
user3851919

Reputation: 33

Read More for dynamic content using jQuery

I am very new to jQuery and also for web design.

Here is the code

http://codepen.io/anon/pen/rxvCe

I got few examples to help me out but they were not exactly what I was looking for.

What I want is.

  1. Read more should be hidden if content is less.
  2. on click of read more complete content should be visible
  3. Text should toggle from read more to read less.
  4. On click of read less content should have its previous height.

HTML

<div class="readMoreCnt">
<div class="row">
    <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet,</p>
    <a href="" class="readMore">Read More</a>
    </div>
</div>
<div class="row">
    <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor </p>

    <a href="" class="readMore">Read More</a>
    </div>
  <div class="span3">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <a href="" class="readMore">Read More</a>
    </div>
</div>
  </div>

CSS

.readMoreCnt p {
  height: 145px;
  overflow: hidden;
  margin-top: 20px;
}

I am not able to know how can I show a content which is already present.

I can do slideUp and slideDown but it can not work as its already shown.

Upvotes: 3

Views: 150

Answers (2)

Tushar
Tushar

Reputation: 4418

Here is the DEMO.

You need to add few more div's and get the height for child and apply it to parent.

JQUERY

/*To hide read more if content is less*/
$('.inCnt').each(function(){
  if ($(this).height() <= 145) {
    $(this).parent('.inner').next('.readMore').hide()
  }
})

$('.readMore').click(function(){
  var cntHeight = $(this).parent('.span3').find('.inCnt').height();
  if ($(this).hasClass('active')) {
    $('.readMore').removeClass('active').html('Read More'); 
    $('.inner').animate({
      maxHeight: '145px'
    });
  } else {
    $('.readMore').removeClass('active').html('Read More'); 
    $('.inner').animate({
      maxHeight: '145px'
    });
  $(this).prev('.inner').animate({
      maxHeight: cntHeight
    }, function(){
    $(this).next('.readMore').addClass('active').html('Read Less');
  });
  }
  return false;
});

Upvotes: 1

Bla...
Bla...

Reputation: 7288

For that purpose you can use jQuery.animate, like below..

$(".readMore").click(function(){
    if($(this).siblings("p").css("height") == "50px"){
         $(this).siblings("p").animate({
                                        height: "+=50"
                                      }, 200);
    }    
    else{
        $(this).siblings("p").animate({
                                        height: "-=50"
                                      }, 200);
    }
});

Check out this Fiddle..

NOTE: I change your default height from 145px to 50px..

Upvotes: 0

Related Questions