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

  2. 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. Advertisements

  3. Heath P. Dillon

    SteveT Guest


    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


    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?

    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. because of JavaScript
     
    Alexey Smirnov, Dec 19, 2008
    #6
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.