how to do expandable / collapsable sections

  • Thread starter Thread starter Heath P. Dillon
  • Start date Start date
H

Heath P. Dillon

Hi,

I am new to asp.net development(using vb.net), and I would like to create a
web page with several areas that contained text, that the user can expand or
collapse as needed...

These are pretty common on many sites such as the microsoft support site...

http://support.microsoft.com/kb/294244

Is there any sample code I can use for this ?

Thanks all...
 
Hi,

I am new to asp.net development(using vb.net), and I would like to createa
web page with several areas that contained text, that the user can expandor
collapse as needed...

These are pretty common on many sites such as the microsoft support site....

http://support.microsoft.com/kb/294244

Is there any sample code I can use for this ?

Thanks all...
Click to expand...

Basically all what you need is just to have an object and a javascript
which can change the style of the object. Set style to "display: none"
when you hide the content and to "display: block" when content must be
visible. Here's little example with two <div> areas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display=='none')?'block':'none';
}
-->
</script>
</head>

<body>
<a href="javascript:;" onClick="toggle('one');">One</a>
<a href="javascript:;" onClick="toggle('two');">Two</a>
<div id="one" style="background-color:#3399FF; display:none; width:
100px; height:100px;">
some random content in the first div
</div>
<div id="two" style="background-color:#993399; display:none; width:
100px; height:100px;">
some random content in the second div
</div>
</body>
</html>
 
Hi,

I am new to asp.net development(using vb.net), and I would like to createa
web page with several areas that contained text, that the user can expandor
collapse as needed...

These are pretty common on many sites such as the microsoft support site....

http://support.microsoft.com/kb/294244

Is there any sample code I can use for this ?

Thanks all...
Click to expand...


You can use a panel controls and make them visible/invisible in
response to some event (e.g., button click).
 
Hi,

I am new to asp.net development(using vb.net), and I would like to create
a
web page with several areas that contained text, that the user can expand
or
collapse as needed...

These are pretty common on many sites such as the microsoft support
site...

http://support.microsoft.com/kb/294244

Is there any sample code I can use for this ?

Thanks all...
Click to expand...


You can use a panel controls and make them visible/invisible in
response to some event (e.g., button click).

Check out the "Accordian" control in the Ajax Toolkit. It does what you
want and does not have to do a postback to the server. Much faster and
cleaner.

LS
 
I tried doing something like this and it didn't seem to work in windows
mobile 6 devices. Any reason why?

Hi,

I am new to asp.net development(using vb.net), and I would like to create
a
web page with several areas that contained text, that the user can expand
or
collapse as needed...

These are pretty common on many sites such as the microsoft support
site...

http://support.microsoft.com/kb/294244

Is there any sample code I can use for this ?

Thanks all...
Click to expand...

Basically all what you need is just to have an object and a javascript
which can change the style of the object. Set style to "display: none"
when you hide the content and to "display: block" when content must be
visible. Here's little example with two <div> areas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display=='none')?'block':'none';
}
-->
</script>
</head>

<body>
<a href="javascript:;" onClick="toggle('one');">One</a>
<a href="javascript:;" onClick="toggle('two');">Two</a>
<div id="one" style="background-color:#3399FF; display:none; width:
100px; height:100px;">
some random content in the first div
</div>
<div id="two" style="background-color:#993399; display:none; width:
100px; height:100px;">
some random content in the second div
</div>
</body>
</html>
 
I tried doing something like this and it didn't seem to work in windows
mobile 6 devices. Any reason why?







Basically all what you need is just to have an object and a javascript
which can change the style of the object. Set style to "display: none"
when you hide the content and to "display: block" when content must be
visible. Here's little example with two <div> areas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display=='none')?'block':'none';}

-->
</script>
</head>

<body>
<a href="javascript:;" onClick="toggle('one');">One</a>
<a href="javascript:;" onClick="toggle('two');">Two</a>
<div id="one" style="background-color:#3399FF; display:none; width:
100px; height:100px;">
some random content in the first div
</div>
<div id="two" style="background-color:#993399; display:none; width:
100px; height:100px;">
some random content in the second div
</div>
</body>
</html>
Click to expand...

because of JavaScript
 
Back
Top