How to conceal certain sections of HTML using jQuery

Question

How to conceal certain sections of HTML using jQuery

Currently, I am in the process of creating a "news" page for a website.

My goal is to only show the first 15 lines of each news article when the page is loaded, creating a neat appearance for visitors. After the 15th line, I include a "read more" link that triggers a jQuery function to reveal the remaining content.

However, a challenge arises as the news content is stored in the database as HTML. When truncating to 15 lines, it can sometimes result in improperly closed div tags, causing issues with the jQuery functionality. Although I have tried various solutions like closing unclosed tags programmatically, there are still instances where problems persist.

Is there a way to hide a section of an HTML tag based solely on its height without needing to insert an additional tag for hiding and showing the content?

jquery html css

Answer 1

Answer №1

To hide the scrollbars and set the desired height, apply the style overflow:hidden to the container. If necessary, wrap the story in another div.

When you click the "read more" button, remove the height style to display the entire story.

Alternatively, you can create a CSS class that toggles on and off each time the button is clicked.

.shortstory{
    height:50px;
}

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

Answer 2

To hide the scrollbars and set the desired height, apply the style overflow:hidden to the container. If necessary, wrap the story in another div.

When you click the "read more" button, remove the height style to display the entire story.

Alternatively, you can create a CSS class that toggles on and off each time the button is clicked.

.shortstory{
    height:50px;
}

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

Answer 3

Answer №2

Check out the jQuery Expander Plugin for more information.

Answer 4

Check out the jQuery Expander Plugin for more information.

Answer 5

Answer №3

One effective approach could be utilizing CSS for assistance. To illustrate, if the article content is structured as shown in the following markup, you can establish a CSS rule specifying "max-height: 15em; overflow: hidden;". Then, with the help of JavaScript, you can dynamically eliminate the 'max-height' attribute once the user clicks on the 'read more' link.

Answer 6

One effective approach could be utilizing CSS for assistance. To illustrate, if the article content is structured as shown in the following markup, you can establish a CSS rule specifying "max-height: 15em; overflow: hidden;". Then, with the help of JavaScript, you can dynamically eliminate the 'max-height' attribute once the user clicks on the 'read more' link.

Answer 7

Answer №4

To easily show or hide more content in your article, you can apply a class with the property overflow:hidden and use jQuery to toggle that class.

Here is the CSS code:

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

Here is a sample markup:

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

Here is the jQuery code:

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

Check out the example on jsfiddle

Answer 8

To easily show or hide more content in your article, you can apply a class with the property overflow:hidden and use jQuery to toggle that class.

Here is the CSS code:

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

Here is a sample markup:

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

Here is the jQuery code:

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

Check out the example on jsfiddle

Answer 9

Answer №5

Here's a tip for displaying a specific number of characters: If your div has a height of 50px, you can utilize Firebug to determine how many characters fit within that space. From there, you can utilize the substring method to extract only that number of characters.

Answer 10

Here's a tip for displaying a specific number of characters: If your div has a height of 50px, you can utilize Firebug to determine how many characters fit within that space. From there, you can utilize the substring method to extract only that number of characters.

How to conceal certain sections of HTML using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The issue with CKEDITOR is that it fails to send data through ajax upon the initial submission

What is causing the border-radius property to malfunction on a particular website when using Internet Explorer?

PHP - Is there a way to transfer data between two PHP files using variables?

Complete Search with the press of Enter on the Auto Textbox

Obtain text content using JQuery and AJAX rather than retrieving the value

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is your browser tab failing to display the complete URL?

Starting with HTML5 can be a bit overwhelming, especially when it comes to compatibility with older systems

What is the best way to incorporate an AJAX GET request into an HTML element?

Ways to divide the header column of a bootstrap 4 table?

Executing a POST request with AJAX in jQuery to communicate across different domains and fetching XML data as

How can I use Java Script to create animation of vertical black bars of a specific width moving across a white background?

What is the process for updating the default WordPress login page from wp-login.php to a customized login page?

Choose the radio button upon clicking away from the input field

What is the best way to rearrange Bootstrap columns for mobile devices?

Is there a way to determine if a container is overflowing at the top?

Dynamic dropdown menu that includes client-side filtering functionality

Separate compound words without hyphens at the boundaries of each word

How can we restart jquery if both functions fail to execute within 5 seconds?

Testing the local transmission of form data via Javascript: A Step-by-Step guide