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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

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

Post 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?
Last edited by mekha on Thu Apr 19, 2012 11:02 am, edited 1 time in total.
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: How can i toggleslide for EVERY div 2?

Post by mekha »

this is my page:
the code works only on the first div1

http://topline.me/shop2/reko3.php
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can i toggleslide for EVERY div 2?

Post 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)
    });
});
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: How can i toggleslide for EVERY div 2?

Post 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>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can i toggleslide for EVERY div 2?

Post 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.
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: How can i toggleslide for EVERY div 2?

Post 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
Post Reply