How to hide/show more text within a certain length (like youtube)

Question

I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.

The link w

Answer 1

$('#more').click(function(e) {
    e.stopPropagation();
    $('div').css({
        'height': 'auto'
    })
});

$(document).click(function() {
    $('div').css({
        'height': '40px'
    })
})

Check working example at http://jsfiddle.net/7Vv8u/4/

With Animation http://jsfiddle.net/7Vv8u/5/

Click on Read more to expand the text. Click outside to minimize it again.

Answer 2

For those who just want a simple Bootstrap solution.

    <style>
     .collapse.in { display: inline !important; }
    </style>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
    <span class="collapse" id="more">
      1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </span>
    <span><a href="#more" data-toggle="collapse">... <i class="fa fa-caret-down"></i></span>

Here's a CodePen example.

Remember to include jquery and bootstrap.min.js in your header.

If you aren't using fontawesome icons, change <i class="fa fa-caret-down"></i> to any icon of your choice.

Answer 3

Here's a really simple solution that worked for me,

<span id="text">Extra Text</span>
<span id="more">show more...</span>
<span id="less">show less...</span>

<script>
 $("#text").hide();
 $("#less").hide();
 $("#more").click( function() {
   $("#text").show();
   $("#less").show();
   $("#more").hide();
 });
 $("#less").click( function() {
   $("#text").hide();
   $("#less").hide();
   $("#more").show();
 });
</script>

Answer 4

HTML

<div>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>
</div>

<a id="more" href="#">Read more </a>
<a id="less" href="#">Read less </a>

CSS

<style type="text/css">
    div{
        width:100px;
        height:50px;
        display:block;
        border:1px solid red;
        padding:10px;
        overflow:hidden;
    }
</style>    

jQuery

<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" 
type="text/css" media="all" />

<script type="text/javascript">
var h = $('div')[0].scrollHeight;


$('#more').click(function(e) {
   e.stopPropagation();
   $('div').animate({
      'height': h
   })
   $('#more').hide();
   $('#less').show();
});

$('#less').click(function(e) {

    $('#more').show();
    $('#less').hide();
});

$(document).click(function() {
    $('div').animate({
        'height': '50px'
    })
})
$(document).ready(function(){
     $('#less').hide();
})
</script>

Answer 5

I know this question is a little old (and has had it's answer selected already) but for those wanting another option that're coming across this question through Google (like I did), I found this dynamic text shortener:

Dynamically shortened Text with “Show More” link using jQuery

I found it was better because you could set the character limit, rather than extra spans in the code, or setting a specific height to a container.
Hope it helps someone else out!

Answer 6

This is another solution using clickable articles (can of course be changed to anything).

http://jsfiddle.net/SqJ53/2/

Edit: If you want to use CSS animation, you must use MAX-HEIGHT instead of HEIGHT

Javascript

$(".container article").click(function() {
        $(this).toggleClass("expand");
})

CSS

.container {
    position: relative;
    width: 900px;
    height: auto;
}
.container article {
    position: relative;
    border: 1px solid #999;
    height: auto;
    max-height: 105px;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
}
.container article:hover {
    background: #dadada;
}
.container article.expand {
    max-height: 900px;
}

HTML

<div class="container">
    <article class="posts-by-cat_article-222">
        <h3><a href="http://google.se">Section 1</a></h3>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
    </article>

    <article class="posts-by-cat_article-222">
        <h3><a href="http://google.se">Section 2</a></h3>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>

    </article>
</div>