Increasing and decreasing the display of content using JQuery based on height rather than character count

Question

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I'm not sure how to achieve this; here is a link to my code Fiddle.

<p>Concerned about the impact of electromagnetic radiation on your health?</p>
<p class="h3">You've been told you need protection!</p>
<p>But from What? EMF? EMC? EMR? EHS? MW? RFR? RF?</p>
<p class="h3">What do these terms mean?</p>
<p>EMF stands for ElectroMagnetic Field or Frequency.</p>
<p>Everything has its own electromagnetic field created by God, and man-made electronics also emit electromagnetic fields. This energy powers every cell in our bodies. <span class="bold">Our whole being, whether physical or mental, conscious or subconscious, is fueled by low-level electrical currents in our body.</span> Ever wondered why electric shock paddles are used to restart a heart?</p>
<p>EMC (ElectroMagnetic Chaos) is just another term for EMF.</p>
<p>EMR (ElectroMagnetic Radiation) refers to the energy emitted by electromagnetic frequencies.</p>
<p>Just like there are <span class="bold">"good fats" and "bad fats," and "good sugars" and "bad sugars" for our bodies, there are also "good EMFs" and "bad EMFs."</span></p>
<p class="h3">Why are some EMFs harmful to us?</p>
...

javascript jquery html css

Answer 1

Answer №1

Instructions on how to style and position content within a container element:

<div id="content_container">
     // place your content here
</div>

To enhance the appearance, add additional elements for styling purposes and a span class for toggling text. Place these right before closing the container div to ensure proper positioning.

<div class="styled_content"></div>
<span class="show_text">Show More</span>
<span class="hide_text">Hide This</span>

Next, apply CSS styles:

#content_container {
     width: 600px;
     height: 200px;
     position: relative;
}

.styled_content {
     bottom: 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
     background: url('img/styled_bg.png') transparent no-repeat;
}

span.show_text {
     overflow: hidden;
     text-decoration: underline;
     position: absolute;
     bottom: 0;
}

span.hide_text {
     overflow: hidden;
     text-decoration: underline;
     display: none;
     position: absolute;
     bottom: 0;
}

Finally, implement jQuery functionality for interaction:

$("span.show_text").click(function() {
     $(this).hide();
     $("span.hide_text").show();
     $("div.styled_content").hide();
     $("div#content_container").css("height","auto");
});
$("span.hide_text").click(function() {
     $(this).hide();
     $("span.show_text").show();
     $("div.styled_content").hide();
     $("div#content_container").css("height","auto");
});

If you have any questions, feel free to ask in the comments section.

Answer 2

Instructions on how to style and position content within a container element:

<div id="content_container">
     // place your content here
</div>

To enhance the appearance, add additional elements for styling purposes and a span class for toggling text. Place these right before closing the container div to ensure proper positioning.

<div class="styled_content"></div>
<span class="show_text">Show More</span>
<span class="hide_text">Hide This</span>

Next, apply CSS styles:

#content_container {
     width: 600px;
     height: 200px;
     position: relative;
}

.styled_content {
     bottom: 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
     background: url('img/styled_bg.png') transparent no-repeat;
}

span.show_text {
     overflow: hidden;
     text-decoration: underline;
     position: absolute;
     bottom: 0;
}

span.hide_text {
     overflow: hidden;
     text-decoration: underline;
     display: none;
     position: absolute;
     bottom: 0;
}

Finally, implement jQuery functionality for interaction:

$("span.show_text").click(function() {
     $(this).hide();
     $("span.hide_text").show();
     $("div.styled_content").hide();
     $("div#content_container").css("height","auto");
});
$("span.hide_text").click(function() {
     $(this).hide();
     $("span.show_text").show();
     $("div.styled_content").hide();
     $("div#content_container").css("height","auto");
});

If you have any questions, feel free to ask in the comments section.

Answer 3

Answer №2

If you're looking to optimize your design and manage overflowing text effectively, consider consolidating all text within a single <div> element and leverage CSS's overflow property.

Here is an example:

<div class="info-container">
    <!--Place your information here-->
</div>

To style it with CSS:

.info-container {
    height: 200px;
    overflow: hidden;
}

You can then refer to this helpful question to check if your content exceeds the set height of 200px. If necessary, display a button for users to reveal the full text by removing the height constraint using a script.

I hope this solution aids in improving your layout!

Answer 4

If you're looking to optimize your design and manage overflowing text effectively, consider consolidating all text within a single <div> element and leverage CSS's overflow property.

Here is an example:

<div class="info-container">
    <!--Place your information here-->
</div>

To style it with CSS:

.info-container {
    height: 200px;
    overflow: hidden;
}

You can then refer to this helpful question to check if your content exceeds the set height of 200px. If necessary, display a button for users to reveal the full text by removing the height constraint using a script.

I hope this solution aids in improving your layout!

Increasing and decreasing the display of content using JQuery based on height rather than character count

Answer №1

Answer №2

Similar questions

How to use Javascript to pause an HTML5 video when closed

Include a character in a tube using Angular

The javascript function in my file isn't being triggered by jquery

What causes axios to return a z_buf_error?

Developing a trivia game using HTML and JavaScript

Incorporating JavaScript code within a partial response retrieved via AJAX

What is the best way to target just an inner div using jQuery?

Which protocols can be used in hrefs within the HTMLEditorKit class of Swing?

Showcase Pictures from a Document

Displaying dynamic SVG with AngularJS

struggling to develop a sophisticated 'shopping cart organization' program

Revamp the angular design of the mat-tree UI bottom border line issue

How can you use C# code to control the visibility of a table row in HTML?

Images with scratches visible in Chrome

Issues with AngularJS edit functionality for records not functioning as expected

Arranging elements within distinct div containers

Styling HTML code using Python

My goal is to utilize React JS to generate a table by sending the values through props using an array of objects

Exploring the world of nested routes in Angular and how to efficiently

One can pass parameters to a promise's success callback within AngularJS using $q