Question

how to do show and hide div in javascript and simillarly in c# pageload how to call div based on id value.can any one help on this ?

<ul>
<li><a href="#cat1">cat1</a></li>
<li><a href="#cat2">cat2</a></li>
<li><a href="#cat3">cat3</a></li>
</ul>

<div id="cat1">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

<div id="cat2">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

<div id="cat3">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

Answer 1

To reference the div in C# codebehind, you will need to add a runat="server" attribute to the div. You can then reference it by ID in the Page_Load method. You should also set ClientIDMode="Static" for the div, to fix the ID for the div so that you can reference it in Javascript. Beware of ID collisions for static IDs.

Using strict Javascript, you can hide the div like this:

var elem = document.getElementById('cat1');
elem.style.display = 'none';

And you can show the div like this:

var elem = document.getElementById('cat1');
elem.style.display = 'block';

JQuery is probably a better way to go though than the getElementById approach:

$('#cat1').hide();

and

$('#cat1').show();