SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Toggle Slider not working

    Hi all,

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

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

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

    The ShowConsole function is this

    PHP Code:
    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. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

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


Bookmarks

Posting Permissions

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