...

View Full Version : Hide / Show Definition List



Staggan
11-21-2012, 11:55 AM
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, 03: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, 10:33 PM
The jQuery slideToggle() method might help -> http://www.w3schools.com/jquery/jquery_slide.asp

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum