JQuery Toggle Slider not working

JavaScript
1

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

2

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.

3

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');
    });
});