PDA

View Full Version : Hide / Show Definition List



Staggan
11-21-2012, 12:55 PM
Hello

I am tryin to hide / show items in a definition list on clicking the heading....

This is my code to display my list:




$result = mysql_query ("SELECT * FROM tournaments t, tournament_participants t1 WHERE t.tournament_id = t1.tournament_id")or die(mysql_query());


$last_heading = null; // 'remember' the last heading value. initialize to a value that will never appear in the data

while ($row = mysql_fetch_assoc($result)){
// detect if the heading changed
if($last_heading != $row['tournament_name']){
// heading changed or is the first one

if($last_heading != null){// not the first one, (optionally) close out the previous section here...

echo "</dl>\n";
}

echo "<dl>\n<dt>Tournament {$row['tournament_name']}</dt>\n";
$last_heading = $row['tournament_name'];
}

echo "<dd>Member {$row['team_id']}</dd>\n";
}

if($last_heading != null){

echo "</dl>\n";

}



This works fine, it gives me a heading for each list and lists the elements underneath.....

I would like to be able to click on each heading (tournament name) to be able to hide the elements below.....

Can anyone help?

Thanks

Staggan
11-21-2012, 04:45 PM
OK,

I now have this partially working.. it only shows or hides the first dd after the dt, even though there are at least 7 other dd in the list....

Here is the code:




<script type="text/javascript">
$(document).ready(function(){

// Hide all dds
$("dl.v_show_hide dd").hide();

// When a dt is clicked,
$("dl.v_show_hide dt").click(function () {
// Toggle the slideVisibility of the dd directly after the clicked dt
$(this).next("dd").slideToggle("slow")
// And hide any dds that are siblings of that "just shown" dd.
.siblings("dd").slideUp("slow");
});

});

</script>



$result = mysql_query ("SELECT * FROM tournaments t, tournament_participants t1 WHERE t.tournament_id = t1.tournament_id")or die(mysql_query());


$last_heading = null; // 'remember' the last heading value. initialize to a value that will never appear in the data

while ($row = mysql_fetch_assoc($result)){
// detect if the heading changed
if($last_heading != $row['tournament_name']){
// heading changed or is the first one

if($last_heading != null){// not the first one, (optionally) close out the previous section here...

echo "</dl>\n";
}

echo "<dl class='v_show_hide' >\n<dt>Tournament {$row['tournament_name']}</dt>\n";
$last_heading = $row['tournament_name'];
}

echo "<dd>Member {$row['team_id']}</dd>\n";
}

if($last_heading != null){

echo "</dl>\n";

}



Any help would be appreciated

Thanks

sunfighter
11-21-2012, 11:33 PM
The jQuery slideToggle() method might help -> http://www.w3schools.com/jquery/jquery_slide.asp

AndrewGSW
11-22-2012, 12:04 AM
View the source for the resultant page to check that the dd's are, in fact, siblings, and check the Console for any errors.