There are a lot of carousels on the page (they symbolize purchases), each element of the carousel is clickable and causes a sliding block with information under this carousel (I made this block alone, the information in it will be loaded using AJAX, why is it alone? - because it is in carousel wrapper, because its height is fixed because of the animation during the hover, and I need to move the block apart pushing all the others).
I managed to isolate the merry-go-rounds separately, there was nothing complicated here.
- Now it’s necessary to transfer the activity class inside the carousel itself, I know that the solution is simple, but I cannot reach it myself.
- Inside the most expanding block appeared
My js for this:
$(document).ready(function () { var active = 'carousel-flights-item--active'; //element-carousel $('.js-flights-info-trigger').click(function(){ if ($(this).hasClass(active)) { $(this).removeClass(active); $(this).parents().children('.js-flights-info-slide').slideToggle(); } else { $(this).addClass(active); $(this).parents().children('.js-flights-info-slide').slideToggle(); } } ); //inside $('.js-flights-info-trigger-slide-up').click(function(){ if ($(this).parents().children('.carousel-flights-item').hasClass(active)) { $(this).parents().children('.carousel-flights-item').removeClass(active); $(this).parents().children('.js-flights-info-slide').slideToggle(); } else { $(this).parents().children('.carousel-flights-item').addClass(active); $(this).parents().children('.js-flights-info-slide').slideToggle(); } } ); }); Waiting for help, thanks in advance! If the solution is not elegant, offer another!
