Dynamic Sliding Panel Using JQuery, based on values from a mySQL database

I am in the process of developing an academic toolkit for my university. The problem statement is, the user will be given a list of courses. When one clicks on that particular name of the开发者_如何学JAVA course, he should get a dynamic slide panel showing the course objective and other details of that course. All these values will be present in a mySQL database. The slide panel is a must requirement here. So please help me how to get the data dynamically in the slide panel from the mySQL database. Thanks in advance... :)

http://api.jquery.com/jQuery.ajax/'>jQuery's $.ajax is your friend!

Something like the following should work (it is untested and not optimized). Hopefully it will lead you in the right direction. You should also add a loading message, error handling, and data caching.

<style>
    .course{
        border:solid 1px #000;
        margin-bottom:10px;
    }
    .title{
        display:block;
        border-bottom:solid 1px #000;
        background:#eee;
        font-weight:bold;
    }
    .details{
        display:none;
    }
</style>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
    <div class='details'></div>
</div>
<script>
    $(function(){
         $(".course").each(function(){
             var self = $(this);
             $(".title",self).click(function(){
                 $.ajax({
                     "url":this.href,
                     "success":function(data){
                          // extract the content you need from the HTML page.
                          var content= $(data).find("#content").html()
                          // insert into the details div and then show it.
                          self.find(".details").html(content).slideDown(1000);
                     }
                 });
                 // prevent default action...
                 return false;
             });
        });
    });
</script>

Also note that there are some abstractions of $.ajax to make calls like this easier (such as $("#myElement").load(url), $.post and $.get). You can find more information about these methods at http://api.jquery.com/category/ajax/