Ajax FAQ loading using jquery?

I have a page with left nav with several topics in a list and once you click on the links, I would want to load the questions related to those topics on the right side. On page load, I load the top 10 question in the right area but once user click on one of the topic on left, I want top 10 questions disa开发者_如何学运维ppear and load the new questions with ajax. All those questions have their own pages and I just need to find a good ajax solution to load them. Please suggest a best way to go about this. I would like to acheive this usign jquery

Here is rough example of my code

• Topic 1
• Topic 2
• Topic 3
• Topic 4

You can use jQuery.load() to load the pages.

$('#topic').load('topics/topic1.html');

where #topic is the id of the container you want to load the answer into.

You can load the entire content at one go into corresponding

<div id="ans1"></div>
<div id="ans2"></div>
<div id="ans3"></div>

but so only ans1 div on initial load and hide the remaining.

when u click on question2 hyperlink hide ans1 div and show the ans2 div.

repeating your html, and adding a landing spot for the load function:

    <ul>
        <li>Topic 1
             <div class="Top10Questions"></div>
        </li>
        <li>Topic 2 <div class="Top10Questions"></div></li>
        <li>Topic 3 <div class="Top10Questions"></div></li>
        <li>Topic 4 <div class="Top10Questions"></div></li>
        </ul>
    <script>
    $(document).ready(
     function(event){
        $("li").click(function(event){
//hide all the questions, you only want to see the topic they clicked on
           $(".Top10Questions").hide();
           $(this).find(".Top10Questions").load("urlToGetAnswer", {json:"of",url:"param",key:"value pairs"}, function(data, text, xhr){
      $(this).show();
    });
        });
    });
    </script>