Jump to content
Search Community

Multiple Accordion Sliders on one page

Ultra Design Agency test
Moderator Tag

Recommended Posts

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()});
});

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...