JavaScript: Show more & Show less

Sometimes we need to show the excerpt of contents ’cause we have limited space to show full of text. And, sometimes we need it to keep the UI looks more simply. As you know, Youtube also use this method to less the data view.

show less show more

Image: Youtube description less view

We can apply this method using Javascript Toggle function.

<script type="text/javascript">
   $(".more").toggle(function(){
    $(this).text("less..").siblings(".complete").show();    
}, function(){
    $(this).text("more..").siblings(".complete").hide();    
});
</script>

And then at the html view we use class on span that will be identified by the javascript.

<span class="teaser">Your less information</span>

<span class="complete"> More information</span>

It’s simply way to use the show more data and keep it less using toggle.

Related