jQuery Toggle Divs Expand When JavaScript do_PostBack Link Is Clicked

I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.

<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle 开发者_StackOverflow社区the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});
</script>



<div class="msg_list">
    <p class="msg_head">They Forgot The Buttons</p>
    <div class="msg_body"><p>
    Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken. 
    </p></div>
    </div>

It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.

<a href="javascript:__doPostBack('ctl00$wpm$ShowProduct$ctl07$ReviewLink','')">Review and Rate this item</a>

When the review link is clicked, it causes all of the jQuery divs to expand.

When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.

I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.

Regards, Shala

EDIT:

I suppose I didn't really ask a question so...

What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?

Here is a link to a product page: MBSC-55

It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.

Okay, I think I see what's happening. When your page loads you execute this code:

$(document).ready(function(){
  //hide the all of the element with class msg_body
  $(".msg_body").hide();

  //toggle the componenet with class msg_body
  $(".msg_head").click(function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});

Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).

If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:

  $(".msg_head").live("click", function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });

This will cause the click handler to still work for newly added .msg_head items.