CODEWITHSUNDEEP
jqueryhtmlcss
Pierre
Pierre

Reputation: 5156

jquery hide part of html code

I'm making a "news" page at the moment for a website.

I only want to display the first, let's say, 15 lines of each news, so that when you land on the page it looks nice. At the end of the 15th line, I add a little link "read more" that calls a jquery hide/show function to display the rest of the news/article.

The problem is that the news content is stored as html in the database, and when I cut the first 15 lines, sometimes a div tag ends up not being closed properly, and it's messing up the jquery call. I tried different solutions, with running a function to close the unclosed tags etc, but there's always special cases where it's messing up.

Is there any solution to hide a part of a html tag purely based on height and without having to add an extra tag to show/hide the part that has to be hidden?

Upvotes: 0

Views: 1071

Answers (5)

Majid Fouladpour
Majid Fouladpour

Reputation: 30242

Take a look at jQuery Expander Plugin.

Upvotes: 2

Geoff Appleford
Geoff Appleford

Reputation: 18832

Set overflow:hidden on the container to hide the scrollbars and give it the desired height. (wrap the story in another container div if you need to)

Then when you click the "read more" button, simply remove the height style so that the entire story is shown.

Or better still, use a CSS class that you toggle on and off each time the button is clicked.

.shortstory{
    height:50px;
}

$(".readmorebutton").click(function(){
    $("selector for story container").toggleClass("shortstory");
});

Upvotes: 3

Mark Coleman
Mark Coleman

Reputation: 40863

If you assign a class with overflow:hidden on your article you can simply use jQuery to toggle that class to show or hide more of the article.

css:

.overflow{
    overflow:hidden;
    height:100px;
}

sample markup:

<div>
    <p class="overflow">
    </p>
    <span>Read More</span>
</div>

jQuery:

$("someshowmorelink").click(function(){
    $(this).siblings("p").toggleClass("overflow");
});

Example on jsfiddle

Upvotes: 1

Dharmesh
Dharmesh

Reputation: 1049

one way is you can show X number of characters : for eg: if my div height is 50px then use firebug and check how many characters it fits...then use substr (sub string) method and get that many characters only

Upvotes: 0

Donnie
Donnie

Reputation: 6351

You might consider using CSS to help. For example, assuming article markup looks like , you could have your CSS definition set at "max-height: 15em; overflow: hidden;", and then, just remove that 'max-height' property with JS when the link to 'read more' is clicked.

Upvotes: 1

Related Questions