how to do expandable / collapsable sections

Discussion in 'ASP .Net' started by Heath P. Dillon, Dec 18, 2008.

  1. 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...
    Heath P. Dillon, Dec 18, 2008
    #1
    1. Advertising

  2. On Dec 18, 8:15 am, "Heath P. Dillon" <> 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>
    Alexey Smirnov, Dec 18, 2008
    #2
    1. Advertising

  3. Heath P. Dillon

    SteveT Guest

    On Dec 18, 2:15 am, "Heath P. Dillon" <> 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).
    SteveT, Dec 18, 2008
    #3
  4. Heath P. Dillon

    Lloyd Sheen Guest

    "SteveT" <> wrote in message
    news:...
    On Dec 18, 2:15 am, "Heath P. Dillon" <> 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
    Lloyd Sheen, Dec 18, 2008
    #4
  5. Heath P. Dillon

    Andy B Guest

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

    "Alexey Smirnov" <> wrote in message
    news:...
    On Dec 18, 8:15 am, "Heath P. Dillon" <> 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>
    Andy B, Dec 18, 2008
    #5
  6. On Dec 19, 12:29 am, "Andy B" <> wrote:
    > I tried doing something like this and it didn't seem to work in windows
    > mobile 6 devices. Any reason why?
    >
    > "Alexey Smirnov" <> wrote in message
    >
    > news:...
    > On Dec 18, 8:15 am, "Heath P. Dillon" <> 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
    Alexey Smirnov, Dec 19, 2008
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian Henry

    collapsable lists?

    Brian Henry, Mar 30, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    397
    Joseph Byrns
    Mar 31, 2005
  2. Rlrcstr

    Collapsable paragraphs...

    Rlrcstr, May 16, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    701
    Rlrcstr
    May 17, 2005
  3. Replies:
    2
    Views:
    446
    Andy Dingley
    May 20, 2005
  4. Raman
    Replies:
    6
    Views:
    4,718
    santosh
    Aug 3, 2007
  5. Savvoulidis Iordanis
    Replies:
    1
    Views:
    2,203
    Michael Nemtsev [MVP]
    Feb 23, 2008
Loading...

Share This Page