Question

Here is my scenario, a ul list with a “holder” div that has HTML in it. I would like to have the ul list have links that when the user clicks should populate the holder div. I have some experience with Jquery but not much. I am able to replace it once but wanted to be able to replace the “holder” div with different blocks of HTML. What I want is the holder div to be populated with the corresponding package HTML.

<ul>
    <li><a href="#">Package 1</a></li>
    <li><a href="#">Package 2</a></li>
    <li><a href="#">Package 3 3</a></li>
</ul>

<div class="holder">
    <p>replace this text here<p>
</div>

<div>
    Package 1 HTML
</div>
<div>
    Package 2 HTML
</div>
<div>
    Package 3 HTML
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {      
        $("li a").click(function() {
             $("div.holder").text($(this).next().text());
             return false;
        });
    });
</script>

Answer 1

You are basically looking for this.

$(document).ready(function() {      
    $("li a").click(function() {
         //get the index of li element
         var index = $(this).parent().index();

         //get the required div from where to get the content
         var $requiredDiv = $(this)
                            .cloest('ul')
                            .nextAll('div:gt(0)')
                            .eq(index); 

         $("div.holder").html($requiredDiv.html());

         return false;
    });
});

nextAll(selector) gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.