Page 1 of 1

{Solved}:How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 9:53 am
by mekha
How can i toggleslide for EVERY div 2?
hi.. i have this jquery code:
$(document).ready(function(){

//*****************SLIDE DIVS*****************
$("#div1").click(function(){


$("#div2").slideToggle(300)


})






})
but it works only on 1 div (the first <div id="div1"></div>)
how can i use the ".each" function to make it work on all div1 and div2 in the page?

Re: How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 10:23 am
by mekha
this is my page:
the code works only on the first div1

http://topline.me/shop2/reko3.php

Re: How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 10:35 am
by Celauran
You're using ids where you should be using classes. Once you've got that sorted, try this

Code: Select all

$(document).ready(function(){
    $(".div1").click(function(){
        $(this).next(".div2").slideToggle(1000)
    });
});

Re: How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 10:50 am
by mekha
but i styled the divs into "inline style"...
and i had give him
id="div1"
id="div2"..
this is all my page:

Code: Select all

<?php
require_once("functions.php");
$art_data = get_all_mekhas2();
$title_data = get_title_data();
mysql_query("SET NAMES 'utf8'");
$sql=mysql_query("SELECT category_name,Id FROM categories");
$result23=mysql_fetch_assoc($sql);	

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
	<meta name="Generator" content="EditPlus">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		
			//*****************SLIDE DIVS*****************
 $("#div1").click(function(){
        $(this).next("#div2").slideToggle(1000)
    });
		
		
		
		
		
		
		
		
		})
		
		
		
		
		
		</script>
		<style>


		</style>
 </head>

 <body>
 <?php

if($art_data)
 foreach($art_data as $lkey=>$lval)

{

{
	

	


echo ' 


  <div style="background-color:red; width:500px; cursor:pointer;" id="div1">   > '.$lval['pages_header'].' <   </div>
   <div style="		background-color:red;
		width:500px;
		cursor:pointer;
		display:none;
		width:500px;" id="div2">
   <table>
		<tr>
			<td>Price:</td>
			<td>'.$lval['pages_price'].'</td>
		</tr>
		<tr>
			<td>Available:</td>
			<td>'.$lval['pages_available'].'</td>
		</tr>
		<tr>
			<td>More Info:</td>
			<td>'.$lval['pages_shortstory'].'</td>
		</tr>
		<tr>
			<td>Order:</td>
			<td><a href="add_to_cart.php?id='.$lval['pages_id'].'" style="color:red; text-decoration:none;">Add To Cart</a></td>
		</tr>
		</table>
   
   </div></br>





















';
}
}
else
{
echo '<h3 style="color:orange;">No Products!</h3>';
}

 ?>







 
 </body>
</html>

Re: How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 10:54 am
by Celauran
mekha wrote:but i styled the divs into "inline style"...
and i had give him
id="div1"
id="div2"..
Yes, I know, and this is wrong. You cannot have multiple elements with the same ID.

Re: How can i toggleslide for EVERY div 2?

Posted: Thu Apr 19, 2012 11:02 am
by mekha
OOOOH right...
i just changed:
id="div1" to class="div1"
and
id="div2" to class="div2"

and your code worked great!!....
you are awesome...thank u man