toggle each div next to each link
Posted: Tue Mar 26, 2013 1:13 pm
Hi there,
I have the following html element in my body section:
[text]<a class="tog" href="#">Click Me</a>
<div class="result">This is a container div</div>
<br /><a class="tog" href="#">Click Me</a>
<div class="result">This is a container div</div>[/text]
and the head section contain this:
[text]
.result{
display: none;
}
[/text]
What I want to do, while clicking on each link (<a>), next div will toggle and at the same time it will fetch data from another page into that div by post method. So my jquery code is:
each div next to each link (<a>) is toggling well by the above code. But the data is not fetching from another page. If I exclude $(this).next from each point of the above code like this:
each div is toggling after clicking each link and fetching post data from another page also, but clicking on any link is fetching data to all divs together at the same time.
My query is how can I revise the code, so that clicking on each link will toggle div next to that link and fetch data to next div only?
I have the following html element in my body section:
[text]<a class="tog" href="#">Click Me</a>
<div class="result">This is a container div</div>
<br /><a class="tog" href="#">Click Me</a>
<div class="result">This is a container div</div>[/text]
and the head section contain this:
[text]
.result{
display: none;
}
[/text]
What I want to do, while clicking on each link (<a>), next div will toggle and at the same time it will fetch data from another page into that div by post method. So my jquery code is:
Code: Select all
$(document).ready(function(){
$(".tog").click(function(){
if (!$(this).next(".result").data('loaded')){
$.post("anotherpage.php",
{id1:"value1"
},function(data){
$(this).next(".result").html(data);
$(this).next(".result").data('loaded',true);
});
}
$(this).next(".result").slideToggle("slow");
return false;
});
});
each div next to each link (<a>) is toggling well by the above code. But the data is not fetching from another page. If I exclude $(this).next from each point of the above code like this:
Code: Select all
$(document).ready(function(){
$(".tog").click(function(){
if (!$(".result").data('loaded')){
$.post("anotherpage.php",
{id1:"value1"
},function(data){
$(".result").html(data);
$(".result").data('loaded',true);
});
}
$(this).next(".result").slideToggle("slow");
return false;
});
});
My query is how can I revise the code, so that clicking on each link will toggle div next to that link and fetch data to next div only?