I use this js-code in my programm <http://jsfiddle.net/yeyene/JyfPg/1/> and it works just fine on fiddle. In my programm it's working on every second click. I'm loading the data for the People from a xml file in a partial view.

On the first click I get an empty space below the Person and on the second it fills with the information I want. When I clik on a second Person it first close the open one (which it shouldn't, as I want to have the same behaviour as in the fiddle) and then it opens the content from the last open one until I click again and then it updates...

My js:

```
$(document).on("click", "#btnPeople", function () {
   if ($("tr#" + $(this).data("href")).is(":visible")) {
      $("tr#" + $(this).data("href")).remove();
   }
   else {
      var peopleCallID = $(this).attr("data-id");
      var urlDetails = siteRoot + peopleID + "/peopleDetails";
      $("#peopleInfos").load(urlDetails);
      $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
        + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
   }
});

```

My html:

```
 <button class="btn btn-default btn-sm active show" id="btnPeople" data-href="peopleInfos" data-id="@item.ID">
                    Details  </button> 

```

I'm sitting on this now for quiet a while,
first my js wouldn't work, so I had to change it from 

```
$(function () { $("#btnPeople").click("click", function () {

```

to

```
 $(document).on("click", "#btnPeople", function () {

```

I'm really new to javascript and jquery, so I'm sorry if there is an easy answer to this.

I already got rid of all extra scripts and style sheets, so there is no conflict there.
And tried : 

```
$(document).ready(function() {
$(document).on("click", "#btnPrintAgent", function() {

```

Appreciate every hint you can give me.

EDIT: Problem solved!

I changed my code to :

```
 $(document).on("click", "#btnPeople", function () {
   if ($("tr#" + $(this).data("href")).is(":visible")) {
      $("tr#" + $(this).data("href")).remove();
   }
   else {
      var peopleCallID = $(this).attr("data-id");
      var urlDetails = siteRoot + peopleID + "/peopleDetails";
                $(this).closest("tr").after("<tr id='" + $(this).data("href") + "'> <td colspan='5'>"
        + $("#" + $(this).data("href")).html() + "</td> </tr>"); 
      $("#peopleInfos").load(urlDetails);
   }
});

```

and now it's loading like it should. 

By changing 

```
  $("#peopleInfos").load(urlDetails);

```

into

```
  $("#"+peopleCallID).load(urlDetails);

```

and setting my html to 

```
<button class="btn btn-default btn-sm active show" id="btnPeople" data-href="@item.ID" data-id="@item.ID">
                Details  </button> 

```

everything works as I wanted. 

Thanks for all the help and getting me in the right direction!