JQuery Toggle Slider not working

[william232]

Hi all,

I have a problem with a slider i am trying to get working this is what i have atm

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		$('#Members').show();
		$('#Officers').hide();
		$('#Generals').hide();
		$('#Leaders').hide();
		$('#Webmaster').hide();
		//
		$('#MembersSection').click(function()
		{
			$('#Members').slideToggle('slow');
			//return true;
	  	});
		$('#OfficersSection').click(function()
		{
			$('#Officers').slideToggle('slow');
			//return true;
	  	});
		$('#GeneralsSection').click(function()
		{
			$('#Generals').slideToggle('slow');
			//return true;
	  	});
		$('#LeadersSection').click(function()
		{
			$('#Leaders').slideToggle('slow');
			//return true;
	  	});
		$('#WebmasterSection').click(function()
		{
			$('#Webmaster').slideToggle('slow');
			//return true;
	  	});
		//
	}
</script>

That is my Javascript code for hiding my id's of the tables

And here is the code i have

i have a php function called ShowConsole() and when i click on MembersSection it should toggle Members html table only issue its display it but doesnt toggle or hide it when page gets displayed.

This is the code

<table>
        	<tr>
            	<th colspan="3" id="MembersSection" align="center">Members</th>
            </tr>
        </table>
	<?
	$group = "Members";
	showConsole($group);?>

The ShowConsole function is this

function showConsole($group)
{
    //
    include("dbconnect.php"); 
    $r2Query="SELECT * FROM console WHERE rankgroup='$group'"; 
    $rs=mysqli_query($con,$r2Query); 
    if(!$rs)  {
        echo "Error:".mysqli_error($con); 
    } 
    
    
    echo '<table border="1" id="'.$group.'">';
    $c = 1;
    while($row = mysqli_fetch_assoc($rs)) {
        if($c == 1) {
            //start of new row
            echo "<tr>";
        }
        echo "<td><a href=members.php?cmd=perms&cid=".$row['cid'].">".$row['consolename']."</a></td>";
        if($c == 3) {
            //last row
            echo "</tr>";
            $c = 0;
        }
        $c++;
    }
    echo '</table>';
    //
} 

But what am i doing wrong to get it to toggle or not but to get them to hide on load?

What am i doing wrong?

Thanks,William

[wilkesreid]

Try creating a CSS stylesheet that says this:

#Officers {display:none;}

That will cause whatever element that has that id to not display when the page loads. But it can be displayed while the page is up via jquery functions/events.

[chris.upjohn]

Your javascript had a few syntax errors in, while i was fixing them i thought of a way to get your code smaller because of the naming convention you have setup. See the below code for an extra small version of your code.

$(function() {
    $('#Members').show();
    $('#Officers, #Generals, #Leaders, #Webmaster').hide();
 
    $('#MembersSection, #OfficersSection, #GeneralsSection, #LeadersSection, #WebmasterSection').click(function() {
        $('#' + $(this).attr('id').replace(/Section/i, '')).slideToggle('slow');
    });
});