Toggle next element only works within divs

Question

I have an article written and would like the hyperlink footnotes to toggle their corresponding references inline. So, example:

jQuery:

$(document).ready(function() {
    $('.reference').hide();
    $('.footnote').click(function() {
        $(this).next('.reference').toggle('slow');
        return false;
    });
});

html:

<p>
    Blah blah blah blah<a href='#' class='footnote'>[5]</a><span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span>
</p>

Which works fine—but in certain cases where formatting is an issue, putting the reference span outside of the paragraph tags screws up the whole operation.

<p>
    Blah blah blah blah<a href='#' class='footnote'>[5]</a>
</p>
<span class='reference'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

Any ideas?

Thanks!

Answer 1

If you want this to be really flexible, you should put the footnote number inside the footnote tag and the reference tag:

<p>
    Blah blah blah blah<a href='#' data-footnote="5" class='footnote'>[5]</a>
</p>
<span class='reference' id='reference-5'>Doe, John. <em>The Book of Blah</em>. 2013.</span>

As for the javascript:

$(document).ready(function() {
    $('.reference').hide();
    $('.footnote').click(function() {
        $('#reference-' + this.getAttribute('data-footnote') ).toggle('slow');
        return false;
    });
});

Answer 2

http://api.jquery.com/next/

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

This means your code: $(this).next('.reference').toggle('slow'); will only select a .reference element immediately following this. In your example .footnote.

This isn't the case in your second example, since .footnote is the last element in its parent. To make it work you'd have to do something like this:

$(this).parent().next('.reference')