Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > how to do expandable / collapsable sections

Reply
Thread Tools

how to do expandable / collapsable sections

 
 
Heath P. Dillon
Guest
Posts: n/a
 
      12-18-2008
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...


 
Reply With Quote
 
 
 
 
Alexey Smirnov
Guest
Posts: n/a
 
      12-18-2008
On Dec 18, 8:15*am, "Heath P. Dillon" <(E-Mail Removed)> wrote:
> 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...


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>
 
Reply With Quote
 
 
 
 
SteveT
Guest
Posts: n/a
 
      12-18-2008
On Dec 18, 2:15*am, "Heath P. Dillon" <(E-Mail Removed)> wrote:
> 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...



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

 
Reply With Quote
 
Lloyd Sheen
Guest
Posts: n/a
 
      12-18-2008

"SteveT" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On Dec 18, 2:15 am, "Heath P. Dillon" <(E-Mail Removed)> wrote:
> 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...



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

 
Reply With Quote
 
Andy B
Guest
Posts: n/a
 
      12-18-2008
I tried doing something like this and it didn't seem to work in windows
mobile 6 devices. Any reason why?

"Alexey Smirnov" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On Dec 18, 8:15 am, "Heath P. Dillon" <(E-Mail Removed)> wrote:
> 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...


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>


 
Reply With Quote
 
Alexey Smirnov
Guest
Posts: n/a
 
      12-19-2008
On Dec 19, 12:29*am, "Andy B" <(E-Mail Removed)> wrote:
> I tried doing something like this and it didn't seem to work in windows
> mobile 6 devices. Any reason why?
>
> "Alexey Smirnov" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
> On Dec 18, 8:15 am, "Heath P. Dillon" <(E-Mail Removed)> wrote:
>
>
>
> > 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...

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


because of JavaScript
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
function-sections and data-sections option in gcc Raman C Programming 6 08-03-2007 10:40 AM
Use styles AND collapsable tree display? news@celticbear.com XML 2 05-20-2005 04:40 PM
Collapsable paragraphs... Rlrcstr ASP .Net 7 05-17-2005 12:34 AM
collapsable lists? Brian Henry ASP .Net 1 03-31-2005 11:00 AM



Advertisments