Bootstrap 3 Essential Training, Crafting collapsible content and accordions

Bootstrap has a special JavaScript component called collapse, and you can use it to create content that appears and disappears when you click on an element. That’s going to make it easy to build things like accordions. So, let’s take a look at how they work.

So this content right here will eventually end up in an accordion, but I’m going to go ahead and start small with a simple button that toggles a section of the page on and off. Now, to do that, we can use either a link or a button.

We’re going to go ahead and use an anchor tag, and it’s going to get a class of “btn.btn-primary”, and for the link, I’m going to ask it to link to some sort of content, so I’m going to need to create an ID here, “#exoticpets”, and eventually that’s going to toggle this section called “exoticpets”.

All right, so this is going to get a role of “button”. The role attribute lets screen readers know what the functionality of this element is supposed to be, so that it knows how to handle it. So, by saying that this element has a role of “button”.

Leave a Reply

Notify of