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?