CODEWITHSUNDEEP
jquery
Jared
Jared

Reputation:

How to use jQuery to hide some content within a DIV tag

I need to display list of news items from a database on a web form. I would like to display a fixed amount of data (say a certain height or number of characters) for each item on page load and then have a MORE button that would then display the full paragraph. I have seen how to use hide or slideUP/Down to hide the whole DIV tag, but how do you just hide part of it? Thank you.

Upvotes: 0

Views: 1073

Answers (3)

Mike Blandford
Mike Blandford

Reputation: 4012

You could try this 

$("#myDiv").css("overflow","hidden").height(100);

And if you wanted to count the number of characters you could do a hack like this:

function GetHeightForChars(txt){
  return $("#myDiv").text(txt).height();
}

And keep calling that function with different amounts of text until you get a height that you like. You'd probably want to do this while the div was not attached to the DOM, or else it might look weird.

Upvotes: 2

Elzo Valugi
Elzo Valugi

Reputation: 27886

Another suggestion apart from the others is to put from the server side the extra text in a specific span tag.

<p>some text <span class='extra'> the extra text </span></p>

And then in js toggle this span as you wish.

Upvotes: 0

John Fisher
John Fisher

Reputation: 22727

You would need to separate the content into different HTML elements. If you don't do that when sending down the HTML, you would need to create some JQuery instructions to do it for you. Then, you can hide the elements you don't want to see, showing them later.

Upvotes: 1

Related Questions