How to Show hide content using core JavaScript ?
Posted by
om 11 May, 2011
Today I was working on another website and had very long text/content and thought to use Jquery, there are several examples given on internet. I tried to use some of them of course they are very simple but because of some reason it didn’t work for me either in IE and chrome.
So decided to compile my own show hide JavaScript which is based on DOM!
Here is very simple code and it works everywhere, Firefox, Internet Explorer, Chrome, Safari etc.
Steps are self explanatory.
A. Use JavaScript code
B. Use Css Class
C. See the example and compile your own!
View Code JS
<script language="javascript" type="text/javascript">
function PM_show_Hide(pmID) {
if (document.getElementById(pmID)) {
if (document.getElementById(pmID+'-show').style.display != 'none') {
document.getElementById(pmID+'-show').style.display = 'none';
document.getElementById(pmID).style.display = 'block';
}
else {
document.getElementById(pmID+'-show').style.display = 'inline';
document.getElementById(pmID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
.more-pm {
display: none;
</style> |
View Code HTML
<p>This is first paragraph of my big content.
<a href="#" id="PM-show" class="showLink" onclick="PM_show_Hide('PM');return false;">Click to See more.</a> <p>
<div id="PM" class="more-PM">
<p>Here is your hidden text which you want to hide!! Copy your text here!</p>
<p><a href="#" id="PM-hide" class="hideLink" onclick="PM_show_Hide('PM');return false;">Click to hide this content.</a></p>
</div> |
Categories :
JavaScript
The class style needs to be modified to be case sensitive in order to work properly:
.more-PM {
display: none;
This is a slick and easy technique, thanks!