Bummer! You have been redirected as the page you requested could not be found.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Matthew Smart
Matthew Smart
12,567 Points

How to hide and show depending on div height

Right, i have a div called #emailBody

#emailBody {
    width:100%;
    min-width:500px;
    float:left;
    margin-bottom:20px;
    max-height:90px;
    overflow:hidden;
}

now inside this is from emails received so some emails will fit inside the 90px height, however when i have long emails they do not. SOOO i put overflow:hidden to hide the excess email and only show 90px worth of it.

What i want to do now is if the email is longer than the 90px height, to show a button that can extend the height to show the full email, maybe get rid of the max-height and replace with height:inherit.

How do i achieve this. Because with the overflow hidden on i cannot use the max-height.

Please help

2 Answers

Petros Sordinas
Petros Sordinas
16,181 Points

Ok then - Here is a quick idea:

Add a button with an id of showEmailBtn and set the id in css to display: none

Then insert this on top of the email display div:

<button id="showEmailBtn" onclick="document.getElementById('emailBody').style.overflow = 'visible'">Show full email text</button>

And add this piece of js code:

if (document.getElementById('emailBody').offsetHeight < document.getElementById('emailBody').scrollHeight) {
    document.getElementById('showEmailBtn').style.display = 'inline';
}

Have a look at this fiddle: http://jsfiddle.net/Lpcje3qx/

What it basically does is : Initially it hides the button and then checks if the height of the content is larger than the height of the div. If yes, display the button. When the button is clicked, it sets the div overflow to visible.

Just a quick idea. However, what happens if the email is so big that the screen is not enough to display it? You will have to use scrolling then. How will you handle your layout? It might be a good idea to have the button display the email in a modal (if you are using bootstrap, this is done quite easily).

Hope this helps!

Matthew Smart
Matthew Smart
12,567 Points

Thanks, that is the best answer ive found from treehouse and stackoverflow, however i managed to do this myself after a bit of experiment.

my jsfiddle is here to show you what i did: http://jsfiddle.net/0sf4hc63/

the emailBody does not have any value for height. so i first check the height of the div and if it is larger than 89px then it will add a class .max which gives it a max-height of 90px. also it adds a button. when the button is clicked it removes the class .max

:)

Petros Sordinas
Petros Sordinas
16,181 Points
Petros Sordinas
Petros Sordinas
16,181 Points

Mathew,

Why don't you try overflow:auto - This will display the scroll bars if the content is larger than the div.

Matthew Smart
Matthew Smart
12,567 Points

thanks for your answer, however the application i'm creating is for a department to do their job, and having to scroll down a box to see the rest of the email may get a bit annoying. Where as clicking a show me button that reveals all the content would be much faster.

But thanks for your response