I have a `<div>` box displaying search message and some radio button for recent message. There is link option for slide toggle. 

When you click on that link it will show some input field and check box and radio button. And at the same time the text of link change to hide option. If you click on that it will hide all the input and checkbox option. 

When I refreash the whole page its working properly but when that paticular box or part is refreashing then the box is hiding and imediately hides. If you refresh that portion **n** number of times the box is going on toggling continously. I think the problem is in registration of event handler. So please give me some solution. 

CODE :

```
$(document).ready(function() {
  $(".SideBar-blockheader1").click(function() {
    e.preventDefault();
    $(".SideBar-blockcontent1").slideToggle("fast");
  });

  $(".SideBar-optionheader").click(function() {
    $(".SideBar-optioncontent").slideToggle("fast");
    $(this).text($(this).text() == $("#hideopt").attr('value') ?  $("#showopt").attr('value') : $("#hideopt").attr('value'));
  });

  $(".SideBar-optionheader").text($("#showopt").attr('value'));
  $(".SideBar-optioncontent").hide();
});

```