Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 8 March 2016

Show Hide

HTML

<a href="#" onclick="showHideDiv('div-1')">Awards</a>
<a href="#" onclick="showHideDiv('div-2')">Awards</a>
<a href="#" onclick="showHideDiv('div-3')">Awards</a>
<a href="#" onclick="showHideDiv('div-4')">Awards</a>
<a href="#" onclick="showHideDiv('div-5')">Awards</a>

<div id="div-1" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-2" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


<div id="div-3" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


JAVA SCRIPT

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
function showHideDiv(id){
 var obj = document.getElementById(id);
if (obj.style.display=="none"){
 obj.style.display='block';
} else if(obj.style.display=="block"){
 obj.style.display='none';
}
}
</script>

No comments :

Post a Comment