Show Hide Script for HTML

Megan Bennett - Tuesday, July 29, 2014

Here is a really simple show and hide script that will display or hide sections of a web page allowing the reader to click a link and view more or close the content back up.

Add this to your style sheet

  #readmore {
    display: none;
}

Add the script where you want the links to be

<a href="javascript:ShowContent('readmore')"><strong>.....Read more</strong></a><span style="color: #3b3125;"> | </span><a href="javascript:HideContent('readmore')"><strong>Show less</strong></a></p>
<!--content hide script-->
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

 Add the div tags <div id="readmore"> </div>

 Like this:

<div id="readmore">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fringilla, elit ac tristique volutpat, nisi tortor placerat risus, id aliquet mi lorem eget libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempus posuere tortor. Praesent varius hendrerit est vitae vestibulum. Vestibulum vestibulum, odio nec placerat molestie, dui neque placerat neque, non adipiscing odio mauris a sapien. Fusce eu consectetur nulla, in ultrices leo. Nulla ut orci nec velit commodo euismod non ac ligula. Nulla diam tellus, pharetra in ultrices ut, vestibulum id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

 

Add this code where you want the links to be. These are the open and close links.  You can also customise the link text to anything you wish.

Example working show / hide script

.....Read more | Show less

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fringilla, elit ac tristique volutpat, nisi tortor placerat risus, id aliquet mi lorem eget libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempus posuere tortor. Praesent varius hendrerit est vitae vestibulum. Vestibulum vestibulum, odio nec placerat molestie, dui neque placerat neque, non adipiscing odio mauris a sapien. Fusce eu consectetur nulla, in ultrices leo. Nulla ut orci nec velit commodo euismod non ac ligula. Nulla diam tellus, pharetra in ultrices ut, vestibulum id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fringilla, elit ac tristique volutpat, nisi tortor placerat risus, id aliquet mi lorem eget libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempus posuere tortor. Praesent varius hendrerit est vitae vestibulum. Vestibulum vestibulum, odio nec placerat molestie, dui neque placerat neque, non adipiscing odio mauris a sapien. Fusce eu consectetur nulla, in ultrices leo. Nulla ut orci nec velit commodo euismod non ac ligula. Nulla diam tellus, pharetra in ultrices ut, vestibulum id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Print Friendly Version of this pagePrint Get a PDF version of this webpagePDF

SEARCH BLOG


MOST RECENT


Tags