Hyperlink To "hidden" Content (a Certain #id) Inside A Jquery-toggler

My question is how to be able to link to a certain content (e.g. a certain id (i.c.: #link), that is inside a jQuery-'Toggler', like the one I have shown below: So, the problem ar

Solution 1:

You can use fadeIn() function on click on the link to open up the toggler and the link will automatically do its job.

JavaScript:

(function($){
    $(document).ready(function(){
        $(".toggler").click(function(){
          $(this).next().slideToggle("slow");
        }).next().hide();
        $(".togglerLink").click(function(){
           $(this).nextAll('.toggled:first').fadeIn("fast");
        });
    });
})(jQuery)

Here's the working example: https://jsfiddle.net/dk8uhh4y/1/

P.S. I have given an id to the link and added more content in the HTML before & after the <span id="link"></span> to properly depict the scenario.

Solution 2:

<a href="#link"id="actualLink">a link</a>

then:

$('#actualLink').click(function(e){
  $('.toggler')[0].click(); // click the toggler..
  location.hash = e.target.href;
});

That should work.

JSFiddle: http://jsfiddle.net/9fkcbqvh/

Solution 3:

An addition to user1726659's automated answer:

Taking his code as a baseline, one can change

• $(".togglerLink").click(function(){

to

• $("a[href^=#]").click(function(){

, so then the class="togglerLink" inside the <a class="togglerLink" href="#link">-links isn't needed any more.

---

So then $("a[href^=#]") looks for the links with a destination that starts with a hashtag (#).

One can read more about this in the jQuery-API entry for Attribute Starts With Selector [name^="value"].