Question

$cour = mysql_sql('SELECT c.id, c.category, cc.name, c.fullname,c.summary FROM 
mdl_course c, mdl_course_categories cc WHERE c.id = cc.course');

echo '<table>';                       
foreach($cour as $cou) 
{
    $coursename = $cou->fullname;
    $courseid = $cou->id;
    $summary = $cou->summary;
    echo '
        <tr style="border:1px solid #BACC82;">  
            <td><a onclick="ShowHide(); return false;">'.$coursename.'</a></td>
        </tr>
        <!--SHOW AND HIDE DIV-->
        <div id="enclosure" style="display:none;">'.$summary.'</div>
    ';
}
echo '</table>';

JQUERY IN THE SAME FILE

function ShowHide() {
    $('#enclosure').animate({"height": "toggle"}, {duration: 1000});
}

Here in my code and its working only for the first row.
I want to pass $courseid to Jquery, so that wherever if i click on coursename, it should display current course summary and if i click the next coursename, the previous summary should hide and show the present one. Could anyone help me a clear code.

Answer 1

You can also do it in the following way:

$cour = mysql_sql('SELECT c.id, c.category, cc.name, c.fullname,c.summary FROM 
mdl_course c, mdl_course_categories cc WHERE c.id = cc.course');

echo '<table>';                       
foreach($cour as $cou) 
{
    $coursename = $cou->fullname;
    $courseid = $cou->id;
    $summary = $cou->summary;
    echo '
        <tr style="border:1px solid #BACC82;">  
            <td>
                <a onclick="ShowHide('.$courseid.'); return false;">'.$coursename.'</a>
                <!--SHOW AND HIDE DIV-->
                <div id="enclosure_'.$courseid.'" style="display:none;">'.$summary.'</div>
            </td>
        </tr>
    ';
}
echo '</table>';

The javascript:

function ShowHide(id) {
    $('#enclosure_'+ id).animate({"height": "toggle"}, {duration: 1000});
}

I made every element with a unique ID by give the div a enclose_{ID} because the id from the database is unique, every div aswell.

EDIT: see update for the HTML