Two Scripts Have a Conflict
I see I'm not the first person to have problems with two bits of Jquery conflicting with each other, though none of the previous posts has helped me to find my problem.
Firstly, I have a short jQuery script in the <head> of my page that creates a tabbed area, and also loads the content to one of the tabs.
- $(document).ready(function() {
$("#tabcontent > div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabcontent div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
$('#prices').load('../prices.php?hid=<?php echo $hid;?>');
});
Then in prices.php I have a hidden area that is revealed by a click on a button. There can be several instances of this on the page (do - while loop) so I use an incrementing variable $i to create unique classes for each instance.
- <a href="javascript:;" class="click<?php echo $i ?> buttonSearchList"> Enquire or Book</a>
<script>
$("a.click<?php echo $i ?>").click(function() {
$(".hiddenstuff<?php echo $i ?>").slideDown(1000),
$("a.click<?php echo $i ?>").fadeOut(500);
});
</script>
I think their is a conflict between the <a> elements in the two scripts, but I can't figure out a solution. If I open prices.php directly in a browser, it works perfectly. When it is in a tab in its parent page, the button doesn;t work to reveal the hidden content.
Any advice would be greatly appreciated.