Jquery Show more Show less with height not characters

Question

I am trying to make a show more/show less link with a specified height of 200px that when clicked shows the rest of the content. anything over 200px will be hidden and there will be a show more link that reveals the rest of the text and i don't know how to do this here is a link to my code Fiddle.

<p>You’re here because you’re concerned about how electromagnetic radiation may be affecting your health.</p>
<p class="h3">You’ve heard that you need to protect yourself!</p>
<p>But from What? EMF? EMC? EMR? EHS? MW? RFR? RF?</p>
<p class="h3">What does it all mean?</p>
<p>EMF stands for ElectroMagnetic Field or Frequency.</p>
<p>Everything God created has its own electromagnetic field.Additionally, everything electronic that man makes has an electromagnetic field as well. It is a measurable type of energy, and for the human body the EMF energy is what powers every cell in our body. <span class="bold">Every living function, whether conscious or subconscious, physical or mental, is powered by low levels of electrical current in our bodies.</span> Have you ever thought about why we use electric shock paddles to restart a heart?</p>
<p>EMC (ElectroMagnetic Chaos) is just a more dramatic way of saying EMF.</p>
<p>EMR (ElectroMagnetic Radiation) is the energy projected from the electromagnetic frequencies.</p>
<p>Just as there are <span class="bold">good fats and bad fats</span> for our body and <span class="bold">good sugars and bad sugars</span> for our body, so there are <span class="bold">good EMFs and bad EMFs</span> for our body.</p>
<p class="h3">So why are some EMFs harmful to our bodies?</p>
<p>God designed the human body with very specific EMF frequencies. Healthy tissue has these strong God-given frequencies. Unhealthy or diseased tissue has weak or unnatural frequencies.</p>
<p>Our healthy EMF frequencies become weak or altered for various reasons, but most commonly by <span class="bold">too much exposure to unnatural EMF frequencies</span> which are out of the realm of our healthy body frequencies.</p>
<p class="h3">Does it really affect us? Is it really killing us?</p>
<p>Electromagnetic Hypersensitivity (EHS), also known as electromagnetic sensitivity and electrohypersensitivity, occurs when the amount of EMF radiation exceeds the body’s ability to deal with it. Once that happens, because of many small EMF exposures or sometimes just one very large exposure, all future exposure can cause a host of health problems, ranging from <span class="bold">headaches, fatigue, depression, allergies, insomnia, asthma, chest pains, erratic heartbeat, high blood pressure, brain fog, ADD/ADHD, digestive disorders & skin disorders to more serious diseases like cancer, alzheimers, parkinsons, fibromyalgia, MS and countless autoimmune & neurological conditions</span>.</p>
<p>The <span class="bold">body was not designed to thrive in the constant presence of all this radiation</span> - electric, magnetic, wireless or ionizing - as many of us are doing today.</p>
<p class="h3">Do the EMF Protection Devices really work?</p>
<p class="bold">The short answer - ABSOLUTELY!</p>
<p>The technology used in all of our EMF Protection Devices is the <span class="bold">same technology that is used to protect computer CPUs</span>. Is EMF real? Well, think about this. Without protection, a computer's CPU would not be able to function due to all the conflicting EMF chaos. <span class="bold">Without this protection computer CPUs would be rendered useless</span>. Computer manufacturers have been using this technology for decades. But it wasn't until recently that <span class="bold">we have begun using that same technology to protect ourselves</span>.</span>

Where's the jQuery/JavaScript that you tried? – j08691 Feb 13 '15 at 03:37 — j08691, Feb 13 '15 at 03:37

score 0 · Answer 1 · edited May 23 '17 at 11:49

What I would suggest trying is wrapping all of that text in one <div> and utilizing CSS's overflow property.

HTML

<div class="info-container">
    <!--Some Info--->
</div>

CSS

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

Then you should take a look at this question to determine if there is information extending beyond the 200px. If there is then show a button and have your script remove the height of the <div> to have all of the text showing.

Hope this helps.

score 0 · Accepted Answer · answered Feb 13 '15 at 03:54

You need to wrap the content in a container element, like a DIV:

<div id="wrapped_text">
     // full content here
</div>

Then add a new DIV to make it look pretty, and a span class to hold the toggle text. You should add this right before closing your wrapper DIV, it will make the positioning work.

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

Now style everything:

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

.fade_text {
     bottom: 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
     background: url('img/fade_text.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;
}

Now use jQuery to make everything work.

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

That should work, feel free to comment with any questions.

Jquery Show more Show less with height not characters

2 Answers2