JSFiddle - React, Tailwind, and code Playground

HTML

I would like to have <a href="#link" id="actualLink">a link</a> here, with a destination inside the Toggler.
<br>
<br>
<hr>
<p class="toggler">Toggle here.</p>
<div id="toggled">Imagine I would like to have the <span id="link" style="color:red">link-destination <i>(id="link")</i></span> inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).</div>
<hr>

CSS

.toggler {
    color:orange;
    text-decoration:underline;
    margin-top:0px
}
.toggler:hover {
    color:orange;
    cursor:pointer;
    text-decoration:none
}
div#toggled {
    background-color:light-green
}

JavaScript

(function ($) {
  $(document).ready(function () {
    $(".toggler").click(function () {
      $(this).next().slideToggle("slow")
    }).next().hide();
    $('#actualLink').click(function(e){
      $('.toggler')[0].click(); // click the toggler..
      location.hash = e.target.href;
    });
  });
})(jQuery)