1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jQuery Show/Hide on multiple divs in a loop

Discussion in 'jQuery' started by gallitin, Jun 15, 2012.

  1. #1
    I'm having some issues with the jQuery in this code. As you can see at the bottom there is a loop that out puts data from the database. The issue I'm having is the hide/show div for "Comments". After the page is displayed if I click comments it opens up comments for every project instead of just the one. I'm assuming I need to name the divs a little different, but how would I do this and keep the jQuery working?

    <? 
    /***************************************************************************************
    Purpose: 	Collects Data to Display on projects.php
    		
    Maintenance History:
    Date:		Name:			Action:	
    ----------------------------------------------------------------------------------------
    06/14/2012	Nathan 	                Created
    ****************************************************************************************/
    
    //Is the user logged in?
    define("_VALID_PHP", true);
    require_once("init.php");
      if (!$user->logged_in)
          redirect_to("index.php");
      $row = $user->getUserData();
      $userid = $row['id'];
      
    //Connect to the Database
    require_once("config.php");
    $connect = mysql_connect($host,$username,$password);
    mysql_select_db($database, $connect);
    
    //Query the needed data
    $result = mysql_query("SELECT p.id,
    							userid,
    							title,
    							description,
    							date_format(createdate,'%M %D %Y') createdate1,
    							date_format(enddate,'%M %D %Y') enddate,
    							complete,
    							username,
    							(select count(id) from comments where projectid = p.id ) commentcount
    							FROM projects p 
    							join users u on p.userid = u.id  
    							where userid = " . $userid . " 
    							and Complete = 0 
    							order by createdate desc");
    //jQuery code to hide/show Comments
    echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
            $(".slidingDiv").hide();
            $(".show_hide").show();
        $(".show_hide").click(function(){
        $(".slidingDiv").slideToggle();
        });
    });
    </script>';
    
    //Check to see if there are any open projects
    if (mysql_num_rows($result) == 0)
      echo 'You have not started any projects</br></br></br></br></br>';
    //If open projects list them
    while($row = mysql_fetch_array($result))
      {
    	if ($row['id'] > 0) echo '
    <div class="projectboxpreview">' . '
    	<div class="newprojectboxtitle">'	. '
    		<a href="' . $path . '/projects/' . $row['id'] . '.php">' . $row['title'] . '</a>' . ' 
    		<div class="pusername"> 
    			Created By: ' . $row['username'] . '
    		</div>' . '
    	</div>' . 
    $row['description'] . '
    			<a href="#" class="show_hide">Comments</a>
    				<div class="slidingDiv">' . $row['commentcount'] . '
    				<a href="#" class="show_hide">hide</a>
    				</div>
    			
    </div>';
    }
     ?>
    Code (markup):

     
    gallitin, Jun 15, 2012 IP
  2. burlesk

    burlesk Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    In your HTML code, the sliding div is a sibling if the link you use to control it. You can just use the jQuery parents() method to navigate up to the container div and then find the .slidingDiv element using the find() method. It will look something like:

    
        $(".show_hide").click(function(){ 
       $(this).parents('.projectboxpreview').find('.slidingDiv').slideToggle();
     });
    
    Code (markup):
     
    burlesk, Jun 15, 2012 IP
  3. gallitin

    gallitin Active Member

    Messages:
    609
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    80
    #3
    Got it had to change to:
    $(".show_hide").click(function(){
       $(this).next('.slidingDiv').slideToggle();
    });
    Code (markup):
     
    gallitin, Jun 15, 2012 IP