Hello Guys, I was trying to create a Mail Box, where on clicking at every Row, I can read the mail content there itself.
As I click on a div, one Div opens right below it, and when I click on it again the Div must hide again.
I am providing the HTML code for such functionality.
Hidden Div for row one is appearing
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> Opening and Hiding Divs on Mouse Clicks </TITLE>
<script>
function showHiddenDiv(divid){
var visibility = document.getElementById(divid).style.display;
if(visibility == “none”){
document.getElementById(divid).style.display = ”;
}
else{
document.getElementById(divid).style.display = ‘none’;
}
}
</script>
</HEAD>
<BODY>
<table width=”350″ border=”1″ datasrc=”#cdcat”>
<tr><td id=”row1″ onclick=”showHiddenDiv(‘hiddenRow1′);” align=”center”>Row One</td></tr>
<tr id=”hiddenRow1″ style=”display:none” height=”50″><td align=”center”>”hidden content for row one”</td></tr>
<tr><td id=”row2″ onclick=”showHiddenDiv(‘hiddenRow2′);” align=”center”>Row Two</td></tr>
<tr id=”hiddenRow2″ style=”display:none” height=”50″><td align=”center”>”hidden content for row two”</td></tr>
<tr><td id=”row3″ onclick=”showHiddenDiv(‘hiddenRow3′);” align=”center”>Row Three</td></tr>
<tr id=”hiddenRow3″ style=”display:none” height=”50″><td align=”center”>”hidden content for row three”</td></tr>
<tr><td id=”row4″ onclick=”showHiddenDiv(‘hiddenRow4′);” align=”center”>Row Four</td></tr>
<tr id=”hiddenRow4″ style=”display:none” height=”50″><td align=”center”>”hidden content for row four”</td></tr>
</table>
</BODY>
</HTML>
This code has been used at various places and uses simplest functions possible.
function showHiddenDiv(divid) is used for displaying and hiding the div whose Id has been passed as divid where ever the function is called.
document.getElementById(divid).style.display is used to get the display style status of the Div whose Id is divid. It will be “none” is Div is hidden & it will be blank if the div is Displayed.
References :
1. Drop Down Menu boxes : http://www.ezdia.com/Drop_down_menus_in_HTML/Content.do?id=495
2. All about element display in html : http://www.ezdia.com/All_about_showelementbyid_in_html/Content.do?id=946
3. Working examples with explanations : http://www.ezdia.com/Favorite_Javascripts_for_designers/Content.do?id=947
