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!

Beth · Post by **Beth** » Thu May 28, 2026 5:20 pm

This is a great and useful code. Thank you.

How about Accordian Controls Carousel? Would that be some specific javacript, built in events (which I can't get to work) or something similar but opposite to the carousel to accordian code? That would be very valuable, too.

crispy68 · Post by **crispy68** » Thu May 28, 2026 5:53 pm

@beth,

I'm sure it can be done. Is this what you need as your original question was for the carousel to open/close the accordion?
I would assume you would want the carousel not to auto slide thru the slides and only slide when the accordion is selected correct?

Beth · Post by **Beth** » Thu May 28, 2026 6:56 pm

Yes, when each accordian panel is clicked, it should open the cooresponding slide on the carousel. I tried messing with the previous code to no avail.

The first code is great! Thank you.

crispy68 · Post by **crispy68** » Thu May 28, 2026 6:58 pm

I have the opposite working.

Since there are 4 possible combinations of using a carousel and accordion together, it may be easier for me to create an extension that would handle the coding portion if there were enough interest in such a thing. Let me know in the comments if you are interested and would use it.

Beth · Post by **Beth** » Thu May 28, 2026 7:33 pm

Wow! Who would't use this.

It's perfectly responsive in a grid and sometimes you might want one to the right (or below in responsive) or vice-versa or versa-versa again. You can make it with the built in carousel buttons or independent ones, too.

Being able to have it how you want would be very useful.

Thank you for your help and attention.

VictorKrs · Post by **VictorKrs** » Thu May 28, 2026 9:38 pm

Oh, Ron! Your initiative is wonderful! Having this advanced functionality in the form of an extension in the arsenal of an ordinary WWB user will, of course, help implement ideas more simply and quickly (remembering you with a kind word every time). I'm for it, with both hands!

Victor

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?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?

Re: Carousel activates Accordian?