I'm new to jQuery and have been struggling with this for a while and would really appreciate any help. 

I've got a details element that contains a link in the content and I want to toggle the tabindex depending on wether or not the details element is open or closed. 

here's my html for the element 

```
<details role="group">
 <summary role="button" aria-controls="details-content-1" aria-expanded="false">
  <span class="summary">Details element that contains a link</span>
 </summary>
 <div class="content-panel" id="details-content-1">
  <p><a href="#" rel="noopener" target="_blank">Find out more</a>.</p>
 </div>
</details>

```

And I've got this jQuery, which sets a tabindex of -1 and toggles it when details is opened. 

```

    $(document).ready(function() {

      var linkIndex = "div.content-panel > p > a";

      $(linkIndex).attr("tabindex", "-1");
      $("details").click( function() {
        if ($ (linkIndex).attr("tabindex") == -1) {
          $ (linkIndex).attr("tabindex", 0);
        } else {
          $ (linkIndex).attr("tabindex", -1);
        }
      });
    });  

```

The problem I've got is when I have more than one details element containing a link on a page. If I click one it'll also toggle the link in the other details element. Is there a way to get it to focus on the child of the details that's been clicked? 

Thanks