CODEWITHSUNDEEP
c#asp.netjavascriptvisual-studiocollapsiblepanelextender
Eric
Eric

Reputation: 8078

Collapse panel javascript issues

I have a collapsible panel extender. I have no issues with the extender. however, I have a link that opens the panel and I want another link saying collapse to close it. I want to hide one show one javascript side. The issue is that it only works for the first row but not the others because I am not getting the unique ID or something. I haven't found a legitimate answer yet. I've tried jquery by getting parent elements and I was unsuccessful. What can I do?

Answer:

<asp:TemplateField HeaderText="Lng Descr" SortExpression="LongDescription">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("LongDescription") %>' TextMode ="MultiLine" Rows="5" ></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>     
                <table>                  
                    <tr id="expand" style="display:">   
                        <td>    
                            <asp:Label ID="Label3" runat="server" ForeColor="Blue"><u></u></asp:Label>
                        </td>
                    </tr>
                </table>
                <asp:Panel ID="Panel1" runat="server" >
                    <table>
                    <tr>
                    <td>
                        <%#Eval("LongDescription")%>
                    </td>
                    </tr>
                    </table>
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                 TargetControlID = "Panel1"
                 CollapsedSize="0"
                ExpandedSize="50"
                Collapsed="true" 
                ExpandControlID="Label3"
                CollapseControlID="Label3"
                AutoCollapse="false" 
                Scrollcontents="false" 
                collapsedText="<u>Expand"
                ExpandDirection="Vertical"
                ExpandedText = "<u>Collapse"
                TextLabelID="Label3" />
                </ItemTemplate>
            </asp:TemplateField>

Upvotes: 0

Views: 2712

Answers (2)

Jason
Jason

Reputation: 52523

This is very easily done with jQuery. In your panel, declare a cssclass, say "panel", and on your label declare a css class, say "toggle". Your jQuery would be:

$(document).ready(function(){
    $(".toggle").toggle(function (){
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    },function () {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});

You can ditch the ajax toolbox control, too. Of course, you also must declare .panel to display: none; in your CSS. Also note, you may have to get rid of your tables around your labels for this to effectively use the "next" function. You also only need one label that will change its text back and forth:

 <asp:LinkButton ID="view" runat="server" text="Expand" cssclass="toggle"> 
 <!-- You may alternatively use a standard link here or even a <p> tag, like this
 <p class="toggle">Expand</p>
 -->
 <asp:Panel ID="Panel1" runat="server" cssclass="panel">
       <table>
                <tr>
                <td>
                    <%#Eval("LongDescription")%>
                </td>
                </tr>
       </table>
 </asp:Panel>

EDIT

Here's the exact code I used to get this running for you. Note that I would normally pull the script and CSS out and put them in a separate file, but for all intents and purposes, this works (if you are using the 1.3.2 jquery file):

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
    .panel    {
        display: none;
    }
</style>

<script type="text/javascript">
$(document).ready(function() {
    $(".toggle").toggle(function() {
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    }, function() {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <p class="toggle" style="cursor:pointer;color:blue"><u>Expand</u></p>
    <asp:Panel ID="Panel1" runat="server" CssClass="panel" >
        <table>
        <tr>
        <td>
            <p>some text</p>
        </td>
        </tr>
        </table>
    </asp:Panel>               
    </form>
</body>
</html>

Upvotes: 2

Woody2143
Woody2143

Reputation: 443

I had success with collapsing using the example from this page: http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html

I just use 

.msg_head {
    cursor: pointer;
}

For the CSS.

And here is what is in my script.

<script type="text/javascript" id="js">
  $(document).ready(function() {

      //toggle the componenet with class msg_body
      $(".msg_head").click(function() {
         $(this).next(".msg_body").slideToggle(600);
      });
  });
</script>

<h2 class="msg_head">Subject<h2>

<div class="msg_body">
    Blah blah blah.
</div>

Upvotes: 1

Related Questions