Toggle slider with external files (live issue?)

Toggle slider with external files (live issue?)

Hi guys,

I'm trying to create a really basic accordion/slider as a header for my site. There are two different banners, the big one (banner_a), and a small version (banner_b). banner_a initially starts open, and banner_b hidden. When a user clicks the .toggle button, I want banner_a to slide close, and then banner_b to slide open and vice versa. I have got this working okay.

My problem comes as each banner has quite a lot of content, so I want to to use two external files banner_a.php and banner_b.php - banner_a.php is loaded initially, and then I try and use ajax() to alternately load the files.

The first time I press the .toggle button it works exactly as I want it to - banner_a closes, banner_b opens. The second time banner_b closes - banner_a doesn't appear. Then third time banner_b appears again - and so on with banner_b opening and closing.

What am I doing wrong? I have a feeling it have something to do with live()? I had a long play and couldn't work it out (I really don't know much about javascript/jquery). Any help would be really appreciated! Thanks.

  2. // Toggle banner
  3. $('.toggle').click(function() {
  5. $(this).find('a').toggleClass('active');
  7. if ($(this).find('a').is('.active')) { // If banner_a is open
  9. $('#banner_a').slideToggle('slow'); // Slide banner_a closed
  11. $.ajax({
  12. url: 'banner_b.php',
  13. success: function(data){
  14. $('#container').empty(); // Remove banner_a
  15. $('#container').html(data); // Load banner_b
  16. $('#banner_b').hide(); // Hide banner_b
  17. $('#banner_b').slideToggle('slow'); // Slide banner_b open
  18. }});
  20. } else {  // If banner_b is open
  22. $('#banner_b').slideToggle('slow'); // Slide banner_b closed
  24. $.ajax({
  25. url: 'banner_a.php',
  26. success: function(data){
  27. $('#container').empty(); // Remove banner_b
  28. $('#container').html(data); // Load banner_a
  29. $('#banner_a').hide(); // Hide banner_a
  30. $('#banner_a').slideToggle('slow'); // Slide banner_a open
  31. }});
  33. }

  35. });