Multiple Accordion Sliders on one page

[Ultra Design Agency 6 Likes (Newbie)]

Hello,

 

We have come a long way with GSAP in the last several months however we have come across an issue we cannot seem to solve.  We have an issue when we have two instances of our accordion slider on one page.   Can you help us resolve this please?

 

The markup looks like this:

 

jQuery(function($){
    var active;
    var boxes = $('.accordion-slider .box').length;
    var singleBoxWidth = (100 / boxes);
    var collapsedWidth = singleBoxWidth - ( singleBoxWidth / ( boxes - 1 ) );
    var openWidth = 100 - (collapsedWidth * ( boxes - 1 ) );
    function accordionSlider() {
        $('.accordion-slider .box').css('width', 100/boxes + '%' )
        $('.accordion-slider .box').on('mouseenter', function(){
            if ( !$(this).hasClass('active') && $(window).width() >= 551 ){
                //hide active elements
                if( active ){
                    TweenLite.to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'});
                    TweenLite.to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'});
                }
                //introduce new active elements
                var others = $('.accordion-slider .box').not(this);
                active = $(this);
                $(this).addClass('active');
                others.removeClass('active');
                var tl = new TimelineLite();
                tl.to(others, 0.5, {width:collapsedWidth + '%'}, 0)
                .to(active, 0.5, {width:openWidth + '%'}, 0)
                .to(active.find('.accordion-slider-title'), 0.9, {opacity:1}, 0.3)
                .to(active.find('.accordion-slider-content'), 0.9, {opacity:1}, 0.4);
            }
        });
        $('.accordion-slider .box').on('mouseleave', function(){
            if ( $(window).width() >= 551 ){
                var all = $('.accordion-slider .box');
                var tl = new TimelineLite();
                tl.to(all, 0.5, {width: 100/boxes + '%'}, 0)
                .to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}, 0)
                .to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}, 0)
                $(this).removeClass('active');
            }
        });
        if( $(window).width() < 551 ) {
            $('.accordion-slider-title, .accordion-slider-content').removeAttr('style');
            $('.accordion-slider .box').removeClass('active').css('width', '100%');
        }    
    }
  accordionSlider()
  $(window).resize(function(){accordionSlider()});
});

[ZachSaucier 7,060 Likes (Superhero)]

Hey UDA,

 

Can you please create a minimal and complete demo for us if you want us to help you debug? Minimal meaning with the least amount of JS possible to reproduce the error that you're asking about:

The more concise your demo the quicker you'll get a response.

[Ultra Design Agency 6 Likes (Newbie)]

I think I have been able to offer what you were looking for, and I sincerely thank you for any help you can offer. 

 

This pen shows the correct functionality.  You can see that it successfully divides each 'li.box' to fill the space designated which in this case is 1000px wide.

See the Pen mdyYzbJ by ultradesignagency (@ultradesignagency) on CodePen

 

This pen shows that when a second accordion slider is added to the page the function accounts for all 'li.box' items on the page and not per slider.  Thus the widths are wrong and it doesnt not fill the 1000px width of each slider.

 

See the Pen gObJdya by ultradesignagency (@ultradesignagency) on CodePen

 

Thank you so much for your help. 

Jay

 

[ZachSaucier 7,060 Likes (Superhero)]

Hey Jay,

 

This is a logical error. You're selecting all of the boxes when you do $('.accordion-slider .box') and then using that for the calculation. Instead, you need to loop through each accordion-slider and do the calculations for each one.

 

In comments:

// Select all accordions
// Loop through each accordion
	// Do the calculations for each
	// Setup the animations for each
// On resize, make sure to kill off the old listeners and then do the above again

Does that make sense?

 

I'm happy to help more if you have specific questions but we don't have the capacity to fix every logical issue that people post in the forums  

[Ultra Design Agency 6 Likes (Newbie)]

Thank you- I wont be able to figure that out. I appreciate your help though.

[Ultra Design Agency 6 Likes (Newbie)]

Is there a tutorial that you might point me to? Or maybe an example somewhere? I image its close, as it is working with just one per page....

[ZachSaucier 7,060 Likes (Superhero)]

Hey Jay,

 

You can look up a plethora of articles on how to do looping with JavaScript. Or look up documentation related to .each() in jQuery, .forEach() in plain JavaScript, or just for loops.

[ZachSaucier 7,060 Likes (Superhero)]

How about you give it a shot and post back here if you can' t figure it out after a while?

[Ultra Design Agency 6 Likes (Newbie)]

I have been googling, codepenning, foruming etc for two days.  It's lack of knowledge, not lack of effort.

[ZachSaucier 7,060 Likes (Superhero)]

Which part of the outline of steps that I posted above are you having trouble with?

[Ultra Design Agency 6 Likes (Newbie)]

Looping through each accordion.  I believe if I can achieve that the rest should work...

[ZachSaucier 7,060 Likes (Superhero)]

Something like this should work:

var accordions = $('.accordion-slider');
accordions.each(function(index, element) {
  var boxes = $(this).find('.box').length; // this should probably be named boxesLength or numBoxes
  // ... do what you need for each accordion
});

See jQuery's .each() documentation for more details. Or their post on iterating.

[Ultra Design Agency 6 Likes (Newbie)]

I tried every possibility with the snippet you provided.   I can't make it work.   Maybe I am not using it in the correct place.  I appreciate your help. 

[Ultra Design Agency 6 Likes (Newbie)]

Here is my pen using the suggested code-

See the Pen gObJdya by ultradesignagency (@ultradesignagency) on CodePen

any pointers o what I am missing here?

[ZachSaucier 7,060 Likes (Superhero)]

You failed to make the other elements within the each loop relative to the accordion that you're looping through. I highly recommend taking some JavaScript courses (and perhaps some jQuery ones if you're set on using it though I don't think it's very helpful these days). It is clear that you copied this code from someone else. I highly recommend trying to truly understand what it's doing and not just use it blindly. It will lessen your development time and give you the ability to modify it however you need to.

See the Pen NWPZPgq?editors=0010 by GreenSock (@GreenSock) on CodePen

[Ultra Design Agency 6 Likes (Newbie)]

Zach,

 

I am very grateful for your help.  I really would love to learn how to use this tool that we are paying for.  I see many online tutorials etc.  What would you recommend as a course of action to go from copy/paste to actual developing?  I am eager to learn.

 

Jay

[ZachSaucier 7,060 Likes (Superhero)]

I'm not too up to date with current best ways to learn JavaScript. When I was learning, I used CodeAcademy paired with trying to answer people's questions on StackOverflow. Maybe you could take a free course on JavaScript and then go through some GSAP tutorials afterwards. Then you could hang around these forums and try to understand the code and demo that people post. 

 

I see that you found Carl's post - he did something very similar