JSFiddle - React, Tailwind, and code Playground
HTML
I would like to have <a class="togglerLink" href="#link">a link</a> here, with a destination inside the Toggler. <br><br>
<p class="toggler">Toggle here.</p>
<div class="toggled"><hr>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>
<span id="link" style="color:red">Link-destination.<i>(id="link")</i></span><hr>
Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>
Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br>Imagine I would like to have the link-destionation (see: below) inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).<br><br><br><br><br><br></div>
I would like to have <a class="togglerLink" href="#link2">a link 2</a> here, with a destination inside the Toggler. <br><br>
<p class="toggler">Toggle here.</p>
<div...
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();
$(".togglerLink").click(function(){
// debugger;
$(this).nextAll('.toggled:first').fadeIn("fast");
});
});
})(jQuery)