how to do expandable / collapsable sections

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...
 
G

Guest

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>
 
S

SteveT

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).
 
L

Lloyd Sheen

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
 
A

Andy B

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>
 
G

Guest

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

What should I do Before I give up programming? 6
Vercel/NextJS: How to access serverless functions from frontend during local development? 0
Collapsable list where text is in columns with headers (like a forum for example) 19
expand and collapse regions 1
How do linkers work? 81
How can I do this? 6
How do debuggers work? 30
Beginner Question - Do I use ASP.net to add dynamic data content to my existing web site? 6

Members online

No members online now.
Total: 41 (members: 0, guests: 41)
Robots: 457

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top