Carousel activates Accordian?

Beth · Post by **Beth** » Tue May 05, 2026 6:27 pm

I know how to make carousel no.1 open slides on carousel no.2 using events and javascript like this: "$('#indexCarousel2').bootstrapcarousel(1)" - but can I do the same to make carousel no.1 trigger opening a panel on an accordian ?

I can do this by using shapes, too, but how about an accordian panel as the target to be opened?

Any help is appreciated.

Post by **Pablo** » Tue May 05, 2026 7:47 pm

It depends on which accordion options you have selected.

jQuery UI has an 'active' method:
https://api.jqueryui.com/accordion/

For Bootstrap, you can use collapse
https://getbootstrap.com/docs/5.3/components/collapse/

For example:
bootstrap.Collapse.getOrCreateInstance('#Accordion1-collapse3').toggle();

Beth · Post by **Beth** » Tue May 05, 2026 8:02 pm

Thank you for your quick answer Pablo. I'm afraid that this is over my head. I was hoping for something simple but that's OK. Just an idea...

BaconFries · Post by **BaconFries** » Thu May 07, 2026 8:31 pm

Maybe the following will do what you need. You will need to change carousel1 and Accordion1-collapse1 to your own requirements. To use simply.place using Page HTML Between the <head></head> tags* Note untested

Code: Select all

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 1. Identify your Carousel
  var myCarousel = document.getElementById('Carousel1'); 
  
  myCarousel.addEventListener('slid.bs.carousel', function (event) {
    
    // 2. Specify which slide (0 is first, 1 is second, etc.)
    // Let's say you want the 2nd slide to trigger the action:
    if (event.to === 1) { 
      
      // 3. Identify the Accordion Panel ID you want to open
      var panelElement = document.getElementById('Accordion1-collapse1'); 
      
      if (panelElement) {
        var bsCollapse = new bootstrap.Collapse(panelElement, {
          toggle: false // Ensures it stays open if already open
        });
        bsCollapse.show();
      }
    }
  });
});
</script>

Beth · Post by **Beth** » Thu May 07, 2026 9:35 pm

Thank you so much Crispy. I thought that there should be a way. I'll work on it and let you know.

BaconFries · Post by **BaconFries** » Thu May 07, 2026 10:09 pm

Thank you so much Crispy?

crispy68 · Post by **crispy68** » Thu May 07, 2026 10:18 pm

@bacon

Beth · Post by **Beth** » Sun May 24, 2026 9:21 pm

Oops!

Thank you Mr. BaconFries. I wasn't paying attention. You both have been so helpful, as is everyone else here on the forum.

VictorKrs · Post by **VictorKrs** » Mon May 25, 2026 3:50 pm

Dear BaconFries!

Something doesn't work for me. Or is there something I didn't understand?
Project link: https://drive.google.com/file/d/1xAoG9m ... sp=sharing

Victor

crispy68 · Post by **crispy68** » Mon May 25, 2026 8:46 pm

@Victor,

Is this what you are after? LINK

VictorKrs · Post by **VictorKrs** » Tue May 26, 2026 8:46 am

Hello, dear Ron!

I tried to implement the idea (based on the advice), but something didn't work:(
As always, Ron, you turn a fairy tale into reality!
I find that this functionality can be applied in a number of cases.
Do you share the demo file?

Victor

crispy68 · Post by **crispy68** » Tue May 26, 2026 11:54 am

@victor,

Keep in mind, this only works if the carousel is set to 'flexible' and the accordion is set to 'jquery'. The code may change if you want to use a different set up.

For the accordion, make sure you insert the same number of panels as there are slides in the carousel and set in the accordion options:
Type = jQuery UI
Active Panel = 0

Enter the following code in the page HTML in the 'Before </body>' tag:

Code: Select all

<script>
$(document).ready(function(){
  $('#Carousel1').on('slide.bs.carousel', function(e){
   var nextIndex = $(e.relatedTarget).index();
   $("#Accordion1").accordion("option","active",nextIndex);
  });
});
</script>

Change 'Carousel1' above to the ID of your carousel and 'Accordion1' to the ID of your accordion.

VictorKrs · Post by **VictorKrs** » Tue May 26, 2026 2:34 pm

Everything is working! Super!
Thanks a lot for your help, Ron!

www.wysiwygwebbuilder.com

Carousel activates Accordian?

Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?