Question

I generate dynamically a toc for elements of class=faqQuestion.
The answer resides in a class=faqAnswer element which is hidden by default.
By clicking on class=faqQuestion entry it will show up with

$(this).next(".faqAnswer").slideToggle(300);

Everything works as expected.

What I want: by clicking on a toc link i will jump to the target faqQuestion element and show the corresponding faqAnweser element.

The way I generate the toc:

$(document).ready(function(){
  var url = window.location.pathname;
  $('<ol />').prependTo('#toc')
  $(".faqQuestion").each(function(i) {
    var current = $(this);
    current.attr("id", "entry" + i);
    $("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
      i + "' entry='" + current.attr("tagName") + "'>" + 
      current.html() + "</a></li>");
  });

This is what I tried, which will jump to the selected faqQuestion but the faqAnswer element is still hidden.

  $(".faqToc").click(function(event){
  $(this).next(".faqAnswer").slideToggle(300);
  });

My problem is this – at least I think so – so I tried something like – which results in “undefined”

    var url = $(this).prop("href");
    alert(url);

Trying attr instead of prop returns also “undefined”.

Can you point out my problem?

I’m trying to improve my Javascript and jQuery know how, so I don’t want to use a toc-plugin.

Update: HTML looks like this:

<div id="toc">
<ol>
<li class="faqToc">
<a href="/faq/#entry0">...</a>
</li>
<li class="faqToc">
<a href="/faq/#entry1">...</a>
</li>
</div>


<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

Answer 1

A very simple way would be to use the index() method since relationship between the TOC elements and the question/answer elements is 1 to 1.

$(".faqToc").click(function(event){
  var index=$(this).index(); /* zero based index position of element within it's siblings*/
 /* toggle answer element with same index */
  $(".faqAnswer").eq(index).slideToggle(300);
});

jQuery API Reference : index()