[dsmportal]

i have some html code with div and i want to hide/show as the user click :

Code:

<div class='section_divider'> 
                <table width='100%' border='0' cellpadding='0' cellspacing='0'>
                <tr>
                <td class='section_title' style='width: 363px'>" + this.XPandoTitle + "</td>          
                <td class='section_updatedby'>" + DateTime.Now + "</td>
                <td class='section_expand'><img  onclick= expandcontent('"+ this.XPandoID + "'); style='WIDTH:100%;cursor:hand; cursor:pointer' alt='collopse' src='Images/section_collapse_off.gif' width='29' height='29'/></td>
                </tr>
                </table>
                </div>

                <div id='" + this.XPandoID + "'class='switchcontent'>     
                <table width='70%' border='0' cellpadding='0' cellspacing='0' class='menutable_outline'>     
                <tr>
           
                </tr>    
                </table>   
                </div>

i want some javascript to hide/show the div
onclick= expandcontent
....

[Nico]

Add this to the div:

Code:

style="display:none"

So it should look like this more or less:

Code:

<div id="whatever" style="display:none">Some content here...</div>

Place this somewhere in the head or wherever:

Code:

<script type="text/javascript">

function Visibility(id)
{
	if (document.getElementById(id).style.display == 'none')
	{
		document.getElementById(id).style.display = 'block';
	}
	else
	{
		document.getElementById(id).style.display = 'none';
	}
}

</script>

And create a link like this, with the correct div id

Code:

<a href="#" onClick="Visibility('whatever');">Show div, hide div</a>

Hope this helps!

[dsmportal]

sorry to say it does not work...

here is my complete code for your reference:

Code:

//html

 <div class='section_divider'> 
                <table width='100%' border='0' cellpadding='0' cellspacing='0'>
                <tr>
                <td class='section_title' style='width: 363px'>this.XPandoTitle</td>          
                <td class='section_updatedby'> DateTime.Now</td>
                <td class='section_expand'><img  onclick="expandContent('XPandoID');" style='WIDTH:100%;cursor:hand; cursor:pointer' alt='collopse' src='Images/section_collapse_off.gif' width='29' height='29'/></td>
                </tr>
                </table>
                             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                             <asp:Button ID="Button1" runat="server" Text="Button" /></div>

 
                <div id='XPandoID' style="display:none" class='switchcontent'>     
                <table width='70%' border='0' cellpadding='0' cellspacing='0' class='menutable_outline'>     
                <tr>
           
                </tr>    
                </table>   
                </div>   



/js

function expandContent(id)
{
alert(id);
 

	if (document.getElementById(id).style.display == 'none')
	{
		document.getElementById(id).style.display = 'block';
	}
	else
	{
		document.getElementById(id).style.display = 'none';
	}
}

[Nico]

It does work for me. You just don't have any content to show up in the div (except an empty table).

Code:

<script type="text/javascript">

function expandContent(id)
{
	if (document.getElementById(id).style.display == 'none')
	{
		document.getElementById(id).style.display = 'block';
	}
	else
	{
		document.getElementById(id).style.display = 'none';
	}
}

</script>

<div class='section_divider'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td class='section_title' style='width: 363px'>this.XPandoTitle</td>
<td class='section_updatedby'> DateTime.Now</td>
<td class='section_expand'><img onclick="expandContent('XPandoID');" style='WIDTH:100%;cursor:hand; cursorointer' alt='collopse' src='Images/section_collapse_off.gif' width='29' height='29'/></td>
</tr>
</table>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" /></div>


<div id='XPandoID' style="display:none" class='switchcontent'>
<table width='70%' border='0' cellpadding='0' cellspacing='0' class='menutable_outline'>
<tr>
<td>Test content here.... </td>
</tr>
</table>
</div>

[dsmportal]

here is what im trying to do..

Code:

//
 protected override void RenderContents(HtmlTextWriter o)
        {
        
        StringBuilder sb = new StringBuilder();
        
            
            sb.Append("  <div class='section_divider'> ");
            sb.Append("    <table width='100%' border='0' cellpadding='0' cellspacing='0'>");
            sb.Append("    <tr>");
            sb.Append("    <td class='section_title' style='width: 363px'>" + this.XPandoTitle + "</td>          ");
            sb.Append("    <td class='section_updatedby'>" + DateTime.Now + "</td>");
            sb.Append("    <td class='section_expand'><img  onclick= expandContent('"+ this.XPandoID + "'); style='WIDTH:100%;cursor:hand; cursor:pointer' alt='collopse' src='Images/section_collapse_off.gif' width='29' height='29'/></td>");
           
            sb.Append("    </tr>");
            sb.Append("    </table>");
            sb.Append("    </div>");

            sb.Append("    <div id='" + this.XPandoID + "'class='switchcontent'>     ");
            sb.Append("    <table width='70%' border='0' cellpadding='0' cellspacing='0' class='menutable_outline'>     ");
            sb.Append("    <tr>");
            sb.Append("    <td>adfasdf             asdfasdf             asdfasd     a   </td>");
            sb.Append("    </tr>    ");
            sb.Append("    </table>   ");
            sb.Append("    </div>   ");

            o.Write(sb.ToString());

Please use [code ][/code ] wrappers, they are there to help keeping the code readable! Once, ok. But thrice in the same thread... - TwoD

[dsmportal]

i debug when i click very very first time im getting the value = 'none'

document.getElementById(id).style.display

none

and it disappear the whole div