JavaScript and client side scripting.
Moderator: General Moderators
-
mekha
- Forum Contributor
- Posts: 112
- Joined: Sat Mar 31, 2012 6:50 am
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.
-
Celauran
- Moderator
- Posts: 6427
- Joined: Tue Nov 09, 2010 2:39 pm
- Location: Montreal, Canada
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
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>
-
Celauran
- Moderator
- Posts: 6427
- Joined: Tue Nov 09, 2010 2:39 pm
- Location: Montreal, Canada
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
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