Hide/show a part of text using only Javascript (jQuery) and CSS

Question

I have a div which contains long text. I'd like to make sure that after loading the page my div will show first few words and after click on it, it will expand and show whole long text. How can I make it in Javascript or jQuery and CSS? I know names of classes, id etc. but I don't have access to html file so I can't write additional code inside html file.

Thank you for help!

Is your script included on the page? If not, then you're out of luck. — evolutionxbox
– evolutionxbox, Commented Jul 20, 2017 at 8:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

Expand `div` via CSS `overflow`

One way of doing this is to write css where you set a height on your div and set the overflow to hidden.

After a click on the div, the overflow can be set to visible:

HTML

<div class='container'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla
  hendrerit, molestie dui at, ultrices sapien...
</div>

CSS

.container {
  height: 1.5rem;
  overflow: hidden;
}

JavaScript

$(document).ready(function() {
  $(".container").click(function() {
    $(this).css("overflow", "visible");
  });
});

CodePen Demo

Expand and hide `div` via CSS `overflow` and JQuery's `toggleClass`

If you want to show and hide the text when clicking on the div, you can use the same css overflow strategy and toggle the class in JQuery like so:

HTML

<div class='container'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla
  hendrerit, molestie dui at, ultrices sapien...
</div>

CSS

.container {
  height: 1.5rem;
  overflow: hidden;
}

.container:hover {
  cursor: pointer;
}

.expand {
  overflow: visible;
}

JavaScript

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

CodePen Demo

Animate in a child `div` via JQuery's `slideDown`

If you want to animate it, you can show and hide the text you want to expand. I used a div for the additional expanded text so it is forced onto the next line (this is more responsive friendly):

HTML

<div class='container'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa 
  dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero.  
  <div id='more'>
    Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla hendrerit, 
    molestie dui at, ultrices sapien. In iaculis nunc sapien, sit amet iaculis velit viverra in. Proin in massa magna. Nullam volutpat...
  </div>
</div>

CSS

.container:hover {
  cursor: pointer;
}

#more {
  display: none;
}

JavaScript

$(document).ready(function() {
  $(".container").click(function() {
    if ($("#more").is(":hidden")) {
      $("#more").slideDown("fast");
    } else {
      $("#more").hide();
    }
  });
});

CodePen Demo

Gerard · Accepted Answer · 2017-07-20 08:15:42Z

Is this what you need?

$("div").on("click", function() {
  $(this).css({"overflow":"auto", "white-space":"normal"});
})

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed leo urna. Fusce varius turpis non elit interdum, quis consectetur neque sollicitudin. Suspendisse ipsum mauris, posuere quis est ac, hendrerit iaculis mauris. In ultrices volutpat rhoncus. Suspendisse semper velit libero, ut consequat erat elementum non. Nullam eu imperdiet quam. Quisque ullamcorper molestie vehicula. Praesent non tellus cursus, cursus urna a, feugiat justo. Sed sit amet efficitur quam. Morbi enim urna, varius eget sodales quis, gravida eu lacus. Donec dignissim dapibus cursus. Donec vulputate lacus purus, porttitor tincidunt velit eleifend ac. Praesent vestibulum lectus quis maximus gravida. Donec et lorem eu arcu volutpat maximus. Proin nulla nibh, blandit a hendrerit at, condimentum vel libero.</div>

Pedro Monteiro Arantes · Accepted Answer · 2017-07-20 08:15:57Z

0

You can make 2 Divs, one with the first part, then when click on div show another div with all content and hide the first div.

<div onclick="showall();" id="somecontent">Some words</div>
<div id="fullcontent" style="display: none;">All content</div>

<script>
   function showall(){
      $('#fullcontent').show();
      $('#somecontent').hide();
   }
</script>

what do you think about that?

answered Jul 20, 2017 at 8:15

Pedro Monteiro Arantes

294 bronze badges

Comments

Aakash Thakur · Accepted Answer · 2017-07-20 08:16:06Z

I tried creating a fiddle for you. Not sure if this is exactly what you want.

You can create a span inside a div and set its display:none. Then from jQuery click you can again change the display to inline.

Here's the fiddle:https://jsfiddle.net/gw164g4x/1/

$(document).ready(function(){
	$("div").click(function(){
  		$("span.clickshow").css("display","inline");
  })
});

.clickshow{
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur 
<span class="clickshow">adipisicing elit. Nulla sapiente natus nesciunt, nostrum. Cum excepturi, assumenda laboriosam voluptatibus quia, aut aspernatur. Dolorem qui obcaecati tenetur repudiandae minus libero ea ratione.</span>
</div>

Hash · Accepted Answer · 2017-07-20 08:22:18Z

0

Most Simple Way,

document.getElementById("content").onclick = function() {
  this.style.height = 'auto';
}

#content {
  border: 1px solid red;
  height: 1em;
  padding: 2px;
  overflow: hidden
}

<div id="content">
<b>This is a Heading</b>
  <p>This is a paragraph.</p>
</div>

answered Jul 20, 2017 at 8:22

Hash

8,1089 gold badges38 silver badges53 bronze badges

Comments

shiva krishna · Accepted Answer · 2017-07-20 08:29:20Z

i think this the one you need , ignore if you not like the post

	$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
    

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
 
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

.morecontent span {
    	display: none;
	}
	.morelink {
    	display: block;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>

Lajos Arpad · Accepted Answer · 2017-07-20 08:48:22Z

0

You can do it like this:

var longtext = "Lorem ipsum dolor ljghlkjghdfghjd lkfhglkdgjlskgj;ljglksjg sldjlsdjlgsdj;lsdj g;lsdkjglsjgl;sdj; ldkjlsd;jgs";
var smalltext = "Lorem ipsum dolor";
$(function() {
    $("#mydiv").text(smalltext);
    var done = false;
    $("#mydiv").click(function() {
        if (!done) {
            done = true;
            $(this).text(longtext);
        }
    });
});

answered Jul 20, 2017 at 8:48

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

Collectives™ on Stack Overflow

Hide/show a part of text using only Javascript (jQuery) and CSS

7 Answers 7

Expand `div` via CSS `overflow`

Expand and hide `div` via CSS `overflow` and JQuery's `toggleClass`

Animate in a child `div` via JQuery's `slideDown`

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Expand div via CSS overflow

Expand and hide div via CSS overflow and JQuery's toggleClass

Animate in a child div via JQuery's slideDown

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Expand `div` via CSS `overflow`

Expand and hide `div` via CSS `overflow` and JQuery's `toggleClass`

Animate in a child `div` via JQuery's `slideDown`