ansaurus

Question

Answer 1

+2 A:

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"&gt;
<head runat="server">
    <title></title>
    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <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>

Jason 2009-07-31 16:30:45

I edited the code I have. I have a little knowledge in Jquery but what am I doing wrong? When I click the button, it just submits the page.

Eric 2009-07-31 16:54:34

if you are using a link, you have to disable the link's default function. try to use a <p> tag instead of a link, or use a standard link. i don't think you're using this link to send information to your server, right?

Jason 2009-07-31 16:56:06

ps: you can disguise your <p> tag as a link by setting the css to `cursor:pointer;` :)

Jason 2009-07-31 16:56:43

Instead of the link i used <p class="toggle" style="cursor:pointer;color:blue"><u>Expand</u></p>

Eric 2009-07-31 17:01:37

is it working now?

Jason 2009-07-31 17:02:19

shouldn't I call those functions somehow?

Eric 2009-07-31 17:02:47

no... that's the way jquery works. when the DOM is ready (the whole `$(document).ready` part, it binds your .toggle classes to the "toggle" event. no need to add additional markup! isn't jquery a beautiful thing? :)

Jason 2009-07-31 17:07:10

It most definitely is. But why do you think this isn't working too well for me?

Eric 2009-07-31 17:09:47

is it still not working? it is possible that you need to put your script and your style rules in your header. also, make sure you're correctly referencing your jquery code file, maybe by using a <script> reference tag in your header: `<script src="js/jquery-1.3.2.js" type="text/javascript"></script>` (after you download the 1.3.2 file: http://www.jquery.com)

Jason 2009-07-31 17:16:08

i updated my response... take a look!

Jason 2009-07-31 17:19:30

that's most probably what my issue is - the version. I wouldn't have rights to download the latest here. It would have to be a company wide decision.

Eric 2009-07-31 17:34:50

any other possible suggestions that you would know of with the current version i do have?

Eric 2009-07-31 17:39:16

I love AJAX!! I couldn't download that version but i didn't realize how powerful that Ajax control was. You fought this thing with me so copy and past the code I will put above, and I'll give you the Accepted Answer.

Eric 2009-07-31 20:03:10

Eric - I've modified my working version of the code to include a reference to Google's hosted version of the jQuery library. Although I'm glad you got it to work with the Ajax Control, remember there's extra overhead involved with it that is circumvented using jQuery. But again, I'm glad you got it working!

Jason 2009-07-31 23:11:36

Answer 2

+1 A:

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>

Woody2143 2009-07-31 17:11:35

ansaurus

tags:

views:

answers:

Collapse panel javascript issues

related questions