Show/Hide content based on anchor - Almost there

Question

I am very close but just can't see what I am missing in the jQuery script to only display the correct block of content based upon the anchor clicked and want to display initially to a visitor the first block of content from the anchors. Any help is appreciated.

I have dynamically generated anchor links with a class of .link

The content is also dynamically generated and each anchor point (A, B, C...) has it's content contained in a ul class of .test-full-list . Any help is appreciated.

Generated content:

Anchor links:

<span class="link"><a href="#A">A</a></span>
<span class="link"><a href="#B">B</a></span> 

Content:

<div class="test-listing-container">
    <ul class="test-full-list">
        <ul class="test-category-list"> 
            <a name="A"></a>
            <div class="anchor-header">- A -</div>
            <li id=test-list> 
                <a href="some link" class="main" title="some title">Some Link 1</a>
                <a href="some link" class="main" title="some title">Some Link 1</a>
            </li>
        </ul>
    </ul>
</div>

Script:

jQuery(document).ready(function () {
    jQuery('.test-listing-container').hide();

    jQuery('.link a').click(function () {
        var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
        jQuerydiv.show('.test-full-list'); // show the relevant div
    });
});

Answer 1

If you're bringing in content dynamically, your .click() will not work. This is because the element you are trying to attach the click to hasn't been generated.

You can replace this:

jQuery('.link a').click(function() {

With this:

jQuery('.test-listing-container').on('click', '.link a', function() {

If that doesn't work:

jQuery(document).on('click', '.link a', function() {

Answer 2

Edit: Adding a fiddle to demo the code: http://jsfiddle.net/Fm6bR/1/

Assuming you can't change the markup slightly, you may do the following AB

<div class="test-listing-container">
    <ul class="test-full-list">
      <ul class="test-category-list">
        <a name="A"></a>
        <div class="anchor-header">- A -</div>
           <li id=test-list>
           <a href="some link" class="main" title="some title">Some Link 1</a>
           <a href="some link" class="main" title="some title">Some Link 1</a>
           </li>
      </ul>
    </ul>
</div>


jQuery(document).ready(function(){
    jQuery('ul.test-category-list').hide();
    jQuery('ul.test-category-list').first().show(); //show the first one by default

    jQuery(document).on('click', '.link a', function (evt) {
        var $a = jQuery(evt.currentTarget),
            name = $a.attr('href').substr(1),
            $a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
            $ul = $a2.parents('ul.test-category-list').first();

        jQuery('ul.test-category-list').hide(); // hide all 
        $ul.show(); // show the relevant one
    });
});

Answer 3

Generate the content with an id based on the anchor name or some other unique identifer of the content. set data-content on each link to the id of the contents id. then use jquery to get the content by using .data function on the link in the click function

HTML

<span class="link"><a href="#fulllistA" data-content="fulllistA">A</a></span>
<span class="link"><a href="#fulllistB" data-content="fulllistB">B</a></span>
<div class="test-listing-container">
   <ul class="test-full-list" id="fulllistA">
     <ul class="test-category-list">
          <li id=test-list>
          <a href="some link" class="main" title="some title">Some Link 1</a>
          <a href="some link" class="main" title="some title">Some Link 1</a>
          </li>
     </ul>
   </ul>
</div>

Javascript

jQuery(document).on("click",".link a",function(e){
   e.preventDefault();
   e.stopPropagation();
   var content = jQuery("#"+jQuery(this).data("content"));
   jQuery(".test-listing-container > ul").not(content).hide(); // hide the others.
   content.show();  
});