From the course: Bootstrap 4 Essential Training
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Add collapse accordions - Bootstrap Tutorial
From the course: Bootstrap 4 Essential Training
Add collapse accordions
- [Narrator] Collapse and accordions are a set of related components that allow you to show or hide HTML content. Collapse is the simplest, and lets you show or hide content on a click. Accordions are similar but part of a bigger group. When one item shows, another hides, so accordions are essentially group of collapses. To set up a collapse, you create a link or a button that activates the collapse element. To that element, you add a data-toggle="collapse," and to target the element, you can use either an ID if it's an anchor tag or link, or you can use a data-target attribute if it's a button. The element that's going to show or hide has the collapse class. Now as I mentioned, accordions are essentially a group of collapses put together. It does require an additional container, and one of the elements should be showing so you add the show class on that element, and you'll need to add the class of dropdown-menu, an it's common to put these in a card style. Let's take a look at an…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Interactive component overview1m 24s
-
(Locked)
Add tooltips7m 21s
-
(Locked)
Display popovers5m 20s
-
(Locked)
Create alerts4m 14s
-
(Locked)
Use dropdowns8m 15s
-
(Locked)
Add collapse accordions12m
-
(Locked)
Use modals12m 3s
-
(Locked)
Build carousels13m 37s
-
(Locked)
Use scrollspy6m 56s
-
(Locked)
Toasts6m 10s
-
(Locked)
Spinners5m 34s
-
(Locked)
Pagination3m 21s
-
(Locked)
Stretched links3m 11s
-
(Locked)
Embeds3m 9s
-
(Locked)
-