Show/Hide divs and swap images with SkinID using Javascript

The following example shows 2 ways of using javascript to show/hide divs (or any elements) on the click event of an image and also to swap the image that uses a skin id. Since skins are applied on the server side, you cannot change SkinID on client side using javascript. Though this is a crude way of doing it, it worked for developing my website since this functionality is used on only one page. I am sure there are more better and easier ways to do it, but these examples can be used in a simple website that uses asp.net or HTML.

Example 1: To Show only one div at a time.

ASP.Net Code

<div id="divContent">

<h2><a href="#" id="lnk1" onclick="return toggle('div1')">What is Test?</a></h2>
<div id="div1" style="display:none">
   <p>Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test</p>
   <p>Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
   Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
</div>

<h2><a href="#" id="lnk8" onclick="return toggle('div8')">What is Sample?</a></h2>
<div id="div8" style="display:none">
   <p>Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
   Sample Sample Sample Sample Sample Sample Sample Sample Sample </p>
</div>
</div>

JavaScript Code:

function toggle(divID)
{
   var divToShow = document.getElementById(divID); 
   var divUL = document.getElementById('dvfaq');
 var divs = divUL.getElementsByTagName('DIV');
 for(var i = 0; i < divs.length; i++)
   {
     divs[i].style.display = 'none';
     if(divToShow.style.display == 'none')
     {
      divToShow.style.display = 'block';
     }
   }
   return false;
}

Example 2: To Show multiple divs at a time and click to open and close.

ASP.Net Code

<a id="lnk0" href="#" onclick="return toggle('div0', 'lnk0')">
Q: What is Test? <asp:Image ID="imgToggle" SkinID="ArrowClose"
style="display: inline" runat="server" /><asp:Image ID="Image27"
SkinID="ArrowOpen" style="display: none" runat="server" /></a>
<br />

<div id="div0" style="display:none">
<p>A: Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test </p>
</div>

<a id="lnk1" href="#" onclick="return toggle('div1', 'lnk1')">
Q: What is Sample? <asp:Image ID="Image1" SkinID="ArrowClose"
style="display: inline" runat="server" /><asp:Image ID="Image28"
SkinID="ArrowOpen" style="display: none" runat="server" /></a>
<br />

<div id="div1" style="display:none">
<p> Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample </p>
</div>

JavaScript Code:

function toggle(divID, imgID)
{
var divToShow = document.getElementById(divID);
if(divToShow.style.display == 'none')
{
  divToShow.style.display = 'block';
}
else if(divToShow.style.display == 'block')
{
  divToShow.style.display = 'none';
}

var imgToShow = document.getElementById(imgID).getElementsByTagName('img')[0];
var imgToHide = document.getElementById(imgID).getElementsByTagName('img')[1];

if(imgToShow.style.display == 'none')
{   
imgToShow.style.display = 'inline';
imgToHide.style.display = 'none';
}
else if(imgToShow.style.display == 'inline')
{   
imgToShow.style.display = 'none';   
imgToHide.style.display = 'inline';
}
return false;
}

Skin Code:

<asp:Image runat="server" SkinID="ArrowClose" ImageUrl="images/arrowClose.gif"
width="9" height="9" />

<asp:Image runat="server" SkinID="ArrowOpen" ImageUrl="images/arrowOpen.gif"
width="9" height="9" />