collapsing parts of a page.

Discussion in 'ASP .Net Web Controls' started by Aussie Rules, Aug 15, 2007.

  1. Aussie Rules

    Aussie Rules Guest

    Hi,

    I have seen on many web sites the ability to collapse/expand sections of
    content. Web site such as face book etc have this feature.

    I want to have a section on a page do this, as the content is not always
    needed by the user. If they want to see it they can expand that section, if
    not, then it doesn't take up any space.

    Any tips on how to do this ?

    Thanks
    Aussie Rules, Aug 15, 2007
    #1
    1. Advertising

  2. Hi Aussie,

    Regarding on the collapsing parts of the page question you mentioned, I
    think there are two command approach to achive this functionality:

    1. Use server-side code to show/hide the certain part of the page. You can
    put some ASP.NET Panel or html <div> with "runat='server'" setting. Thus,
    you can use some button or other postback event's code to show and hide
    the certain Panel or Div.

    2. If you do not want the page to postback everytime you change the certain
    page fragment's visibility, you can use client script to do the work. The
    css style "display" attribute can be used to show/hide a certain html
    element. I have written a simple test page to demonstrate this, you can
    have a look to see whether it performs as you want:

    =======aspx template====================


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" >
    function showhide(btn, divid)
    {
    var div = document.getElementById(divid);

    if(btn.value == "-")
    {
    div.style.display = "none";
    btn.value = "+";
    }else
    {
    div.style.display = "";
    btn.value = "-";
    }
    }

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <table style="width:80%;border-width:2pt" >
    <tr>
    <td><input type="button" onclick="showhide(this,'div1');" value="-"
    />
    <div id="div1" style="border-style:solid;border-width:1pt">
    div1<br />
    <asp:Button ID="Button1" runat="server" Text="Button" /><br />
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:Image ID="Image1" runat="server"
    ImageUrl="http://www.bbc.co.uk/radio/i/images/bbc_ws_promo.gif" />

    </div>
    </td>
    </tr>
    <tr>
    <td><input type="button" onclick="showhide(this,'div2');" value="-"
    />
    <div id="div2" style="border-style:solid;border-width:1pt">
    div2<br />
    <asp:LinkButton ID="LinkButton1"
    runat="server">LinkButton</asp:LinkButton><br />
    <br />
    <asp:Button ID="Button2" runat="server" Text="Button" />
    <br />
    <asp:HyperLink ID="HyperLink1"
    runat="server">HyperLink</asp:HyperLink>
    <asp:Image ID="Image2" runat="server"
    ImageUrl="http://www.bbc.co.uk/radio/i/images/bbc_ws_promo.gif" />


    </div>
    </td>
    </tr>

    </table>
    </div>
    </form>
    </body>
    </html>
    ==================================

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead



    ==================================================

    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    ications.



    Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
    where an initial response from the community or a Microsoft Support
    Engineer within 1 business day is acceptable. Please note that each follow
    up response may take approximately 2 business days as the support
    professional working with you may need further investigation to reach the
    most efficient resolution. The offering is not appropriate for situations
    that require urgent, real-time or phone-based interactions or complex
    project analysis and dump analysis issues. Issues of this nature are best
    handled working with a dedicated Microsoft Support Engineer by contacting
    Microsoft Customer Support Services (CSS) at
    http://msdn.microsoft.com/subscriptions/support/default.aspx.

    ==================================================


    This posting is provided "AS IS" with no warranties, and confers no rights.
    Steven Cheng[MSFT], Aug 16, 2007
    #2
    1. Advertising

  3. Hi Aussie,

    Does the suggestion in my last reply helps some? If you have any further
    questions on this, please feel free to post here.

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead


    This posting is provided "AS IS" with no warranties, and confers no rights.
    Steven Cheng[MSFT], Aug 20, 2007
    #3
    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. Replies:
    3
    Views:
    582
    Keith Thompson
    Mar 31, 2007
  2. Replies:
    1
    Views:
    937
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Apr 12, 2007
  3. kizk
    Replies:
    0
    Views:
    559
  4. Chris Snyder

    Collapsing sections of a web page - ideas?

    Chris Snyder, Jan 15, 2004, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    98
    Chris Snyder
    Jan 15, 2004
Loading...

Share This Page