Home/ Questions/Q 7026501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:07:33+00:00

As with a few other posts here on StackOverflow, I’m looking to load in

  • 0

As with a few other posts here on StackOverflow, I’m looking to load in content from a series of hidden divs into a primary content div. However, I am looking to extend this functionality and do something I wasn’t able to find in any other posts.

I did find an answer to the basis of this question here as provided by Shyju.

While the solution works very well, I would like to extend this and be able to link to a hidden div from within the active div (or #ajax as listed in the solution linked).

Ideally, I would like to have a navigation section that contains home, previous and next links that all pull from hidden divs to replace the content of an #activeContent div. The initial content of #activeContent (Home) would be something of a table of contents which would allow you to press on a list item to jump directly to the associated hidden div, replacing the table of contents.

I’ve used modified gallery sliders in the past to accommodate this, but I didn’t want to have to scroll past all the divs between point A and point B on the way to point B. I find the ajax method of simply replacing the content to be much more elegant in this context.

Hopefully my request for assistance makes sense. Any help would be greatly appreciated!

My current code looks like this –

$(".itemLink").click(function () {

    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#item_" + id).html();

    $('#activeContent').fadeOut(600,function(){
        $('#activeContent').html(contentTobeLoaded).fadeIn(500, function () {
        //do whatever you want after fadeIn
        });
    });

});

<body>


<section id="navigation">
    <a href="#" class="itemLink" id="a1">Item 1</a>
    <a href="#" class="itemLink" id="a2">Item 2</a>
    <a href="#" class="itemLink" id="a3">Item 3</a>
</section>


<section id="content">
    <h3>Content will be displayed below</h3>

    <div id="activeContent"></div>
</section>


<section id="hiddenContainer" style="display:none;">
    <div id="item_1">
        Item 1 content<br><br>
        <a href="#" class="itemLink" id="a4">Item 4</a>
    </div>

    <div id="item_2">
        Item 2 content
    </div>

    <div id="item_3">
        Item 3 content
    </div>

    <div id="item_4">
        Item 4 content
    </div>
</section>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to change your click method to use the live method. When you move the content from the hidden div to your active, it’s erasing the event tied to your a elements. live maintains all events on current and future elements.

    $(".itemLink").live('click', function () {

    Fiddle Demo: http://jsfiddle.net/hSyYE/

    Note

    If your using jQuery 1.7+ then the proper way would be

    $('body').on('click', 'a.itemLink', function () {

    • 0