Reputation:
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
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
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
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