Conflicting accordions.

Question

I have two separate accordions that are are using similar jquery functions. One has nested accordions in it that need to expand and collapse when clicked, the other has just one accordion that needs to expand and collapse when clicked. The jquery code I have seems to conflicting with each other, is there a more efficient way to write this?

    $('.accordion-title').click(function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').next('.accordion-content').slideUp();
        } else {
            $('.accordion-title').removeClass('active');
            $('.accordion-content').slideUp();
            $(this).addClass('active').next('.accordion-content').slideDown();
        }
    });


  Breakfast
  American
  Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
  Continental
  Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
  English
  Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
  The Healthy Stuff
  Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
  Miscellaneous
  Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

$(function () {
      $('.accordion-title').click(function () {
      if ($(this).hasClass('active')) {
      $(this).removeClass('active').next('.accordion-content').slideUp();
      } else {
      $(this).siblings('.accordion-title').removeClass('active');
      var $ct = $(this).siblings('.accordion-content').slideUp();
      $ct.find('.accordion-title.active').removeClass('active');
      $ct.find('.accordion-content').slideUp();
      $(this).addClass('active').next('.accordion-content').slideDown();
      }
      });
});


              			Camper 1 Information
              			
              				

              					
              						Name
              						
              					
              				
              				
              					
              						Gender
              						
              							
              								
              								Male
              							
              							
              								
              								Female
              							
              						
              					
              				
              				
              					
              						Grade in School
              						
              					
              				
              				
              					
              						Date of Birth
              						
              						
              						
              					
              				
              				
              					
              						Enroll in Camp Shoreline
              						
              						
              					
              				
              				
              					
              						Windsurfing & Sailing Level I
              						
              						
              					
              				
              				
              					
              						Windsurfing & Sailing Level II
              						
              						
              					
              				
              				
              					
              						Options
              						
              					
              				








              			
              			Camper 2 Information

The second form is only partial code so it could fit in the post. Thanks.

charlietfl · Accepted Answer

You need to isolate the instance which you can do by traversing only within the immediate parent of each accordion title.

I'm not going to rewrite both sets but will give you the basic approach using the first

$('.accordion-title').click(function () {
        var $parent = $(this).parent();// returns 
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').next('.accordion-content').slideUp();
        } else {
            // only look within instance of 
            $parent.find('.accordion-title').removeClass('active');
            $parent.find('.accordion-content').slideUp();
            $(this).addClass('active').next('.accordion-content').slideDown();
        }
    });

Conflicting accordions.

Answers (1)

Related Questions