Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ali M Malik
Ali M Malik
33,293 Points

How to get bootstrap components to talk to each other?

Hey Treehouse,

One of the projects I am working on requires combining an accordion and a slider to make a feature component. I built everything and it looks fine, I am using less to customize the styles and haven't touched the javascript.

I read the javascript files for the carousel and collapse components. And I understand how everything works, but I wouldn't dare change it. In the documentation I read about using events to hook into the functionality but I don't know how to get the two to talk to each other. So going to slide one on the carousel expands the first accordion, and clicking on the second accordion would expand it and switch to slide two, and so on.

this is the code from the documentation for the events

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})
$('#myCollapsible').on('show.bs.collapse', function () {
  // do something…
})

I just don't know which functions to call. Can someone point me in the right direction?

Thanks in advance.

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

There is going to be a lot of extra JS here that you'll have to do. But basically the carousel gives you two callbacks. One is for right when the starts to slide, the other is once it has completed it's slide motion.

slide.bs.carousel is for when something begins to happen and slid.bs.carousel is for once something has happened. Notice the present and past tense used in the callback name. These callbacks allow you to do something. I'd imagine you would want to start doing stuff just as the bootstrap carousel starts to move.

For the Collapse or According portion, it gives you 4 callbacks.

show.bs.collapse is called as soon as one of the elements is told to "show". This is where that slide down motion begins. shown.bs.collapse is called when the transition is complete, and the element is visible to the user. hide.bs-collapse is called when the element is told to "hide" itself, and hidden.bs.collapse is called when the elements slide transition is over and the element is hidden or collapsed again.

You're going to have to write custom JS to attach clicks to slide and collapse data. These callbacks will help you, but the majority of the work is going to be custom.

And you're very smart not to edit the core bootstrap file. Just build on top of it.

Ali M Malik
Ali M Malik
33,293 Points

Thanks, I am trying to break down their code and see the approach they took to it and see if I can build on top of it. But hooking through the custom events works.

$('#accordion').on('show.bs.collapse', function () {
        alert("meow");
})

Thanks again, I'll give it a shot and try to do this.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ali,

I think that you will want to take a look at the methods that each of the two plugins has in addition to the events that Kevin has mentioned.

You'll probably need to use both together. The general idea might be that the collapse event handlers are going to call methods on the carousel plugin and vice versa to keep them in sync. It sounded to me like either one could control the other.

You didn't specify too much about whether this is all user interaction or if the carousel is automatically running but both can be user controlled.

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

Jason,

I believe you're correct. It will end up being a mix between the events and the methods both components run. The feature are requires user interaction, but I would also like it to cycle through the items, which might be too much to ask. Because both elements have their own content, one has to control the other and vise versa, can't be one sided.

This is a bigger challenge than I wanted for this project, but still trying.

Thanks though.