Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ultra Design Agency

Multiple Accordion Sliders on one page

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

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.

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

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....

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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. 

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

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

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.
×