Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide / Show Definition List

    Hello

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

    This is my code to display my list:

    Code:
    $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

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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
    Last edited by Staggan; 11-21-2012 at 03:48 PM.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,226
    Thanks
    23
    Thanked 606 Times in 605 Posts
    The jQuery slideToggle() method might help -> http://www.w3schools.com/jquery/jquery_slide.asp

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    View the source for the resultant page to check that the dd's are, in fact, siblings, and check the Console for any errors.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •