Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Accordion panels with collapse functionality

From: Up and Running with Bootstrap 3

Video: Accordion panels with collapse functionality

Another interactive way of presenting a ton of information one one webpage is to use Accordion panels. And Accordion panels are becoming more and more common on websites. I'm on Bootstrap's website, which is getbootstrap.com. Click on the link for JavaScript. Then click on Collapse over in the left navigation, and you'll see all the documentation here about Accordion panels. So I'm looking at the example accordion here. As you'll see what happens is, it says collapsible group item one with some text.

Accordion panels with collapse functionality

Another interactive way of presenting a ton of information one one webpage is to use Accordion panels. And Accordion panels are becoming more and more common on websites. I'm on Bootstrap's website, which is getbootstrap.com. Click on the link for JavaScript. Then click on Collapse over in the left navigation, and you'll see all the documentation here about Accordion panels. So I'm looking at the example accordion here. As you'll see what happens is, it says collapsible group item one with some text.

As I click on individual elements here, I never leave my page, but I reveal various pieces of information as I click on the various links here within the page. In principle, this works the same kind of way as the tabs that we just saw. And that there's this link that we click on. And when we click on that link, the ID that's specified in that link is going to correspond to an ID with that information that appears elsewhere inside of our markup. And then we use JavaScript to hide and reveal those chunks of content on the page.

The markup though for an Accordion panel is quite a bit more involved and a little bit more complicated than the tabs. So I'm going to go ahead and walk through this with you. There's four of these to complete here on our webpage. Four little groups of Accordion panels to set up. What I'm going to do is I'm going to walk you through the first one, and then I'm going to go ahead and do the other three offline. Because they are kind of long and involved. So, I'm now looking at my starting webpage. So, this is in your exercise files folder. Go to folder number five, video number three.

Copy over the HTML file that's there into your Bootstrap folder. And then open it up in your browser. And what you'll see here is the same old services page we've seen many times before. And instead of the tabs down at the bottom now, I am going to try to make an Accordion panel presenting these four bits of information at the bottom of the page. So the words vaccination, check ups, senior pets, and diet plans will wind up being the clickable text that I can click on. And then the little chunk of text underneath with the read more will appear when I click on those various titles.

And, I have, of course I've changed the markup here a little bit to make to make it look this way, over the individual thumbnails that you saw or over the tabs. Alright. So, now I'm going to take a look at this same document inside of sublime text. And if you scroll on down the page here to where all of this starts, you're going to go down to line number 69. And right here, you'll see that I just have a little line of text here. It's just the glyphicon plus the word vaccinations. There's actually no markup anywhere else around that line, we will be adding some of course.

And then you'll see the additional text underneath the two paragraphs. Just the paragraph of information and the paragraph with the button for reading more. And I've got four of these set up here. The one I'm going to set up with you is the vaccinations item up here on the top. Then I'm going to set up the other three offline. And I will give you the completed file inside of your exercise files folder. So, if you get lost anywhere along the way, you can take a look at my work and compare it with yours. If you're going to start this, the very first thing you have to do is specify this entire area, is going to have to do with the Accordion panels.

We are going to do that with a div. So, just above the very first line here where we can start the line 69, on line 68, I'm going to add a div with the class of panel-group and then you need to give this an ID. And the ID can be anything you like. I'm not terribly creative this way. So I'm just going to call it Accordion. If you had several Accordions on your page, each of them would have to have a unique ID. And then I'm going to scroll down here to the bottom on line 87, and I'm going to put in a /div.

And because we're going to add a lot of div's to this markup, I'm also going to put in a comment that says end accordion. Then, around the very first item up here at the top. The div up at the very top here, lines 69 through 71. I'm going to add another div. And this is going to be a div with a class of panel and panel-default. And I'm going to close that div here, just after the last paragraph around line 73, /div.

So, this particular div with the classes of panel and panel-default is going to specify everything that's inside of this as part of one Accordion panel. It's just one unit that we're working with there. Alright. So the next thing I want to do, is I want to designate where the heading of this particular panel is going to be. In other words, what is the title, what's clickable, and all the rest of that. Basically, everything that's going to go around this span and the word vaccinations here. So let's go ahead and add that. And in fact I'm just going to put in a couple of returns so that you see that one line there, it sort of stands out a little bit better.

So, here on line 70, I'm going to add a div with a class of panel-heading. So this indicates that this, the start of the Accordion panel, inside of that, I'm going to put in an H4. And it could be any heading tag you want, but we've been using H4s here all along, so I'm going to continue using that with a class of panel-title. So these H4 and the div that I just put in need to be closed. So I'm going to go ahead and close those before I forget.

So a /h4 after the word vaccinations here on line 73, and a /div that will go in line 74, and that closes the div that starts on line 70. If you make sure you do your indents right, hopefully, those will all line up. And you can see which divs are open and which are closed. Alright, then, inside we're going to add an A tag here that's going to go all the way around. So let's go ahead a, href equals a #. That's the start just before the span and it's going to end after vaccinations.

And then inside of that A tag, we're going to add several attributes. So, let's start with the href. As we saw with the tabs, what we're going to do is, we need to specify when this word vaccinations is clicked. Where is it going to go in the page? And the href here is actually going to refer to an ID elsewhere on the page, so we're going to use the same names that we used under tab. So this is VACC. And I'll put in that ID of VACC later when I go down around line 76 and I work with that bit of content down there.

Right now, we're just setting up this clickable area portion of the Accordion panel. Then I'm going to add to this a class of accordion-toggle, because of course, this is the link that we're going to click that's going to open or close something. And since of course, we're clicking on something and we're expecting something to happen, this is also where we'd also need to bind the JavaScript. So we're going to say that this is the data-toggle of collapse. Collapse is the name of, of this particular JavaScript widget inside of Bootstrap.

They call it collapse instead of calling it accordion. And we’re also going to add a data-parent of #accordion. So we're saying that this particular link is part of the structure that goes with the ID up here on line 68. The ID of accordion. So, we're associating all these units together with this data parent attribute. So, that's a lot of markup that went around that span class that we started with in the word vaccinations. So, that's everything that's going up there in the panel heading.

Now we're going to set up the panel body. Well, what we're going to do is just after the /div tag here on line 75, I'm going to add a div with the ID of VACC. And of course that corresponds with the href from line 72, where we're calling that ID. Alright, so back to line 75. We're going to give this a class of panel-collapse and collapse. And I'm also going to add one other thing which is a class of in, in.

And by adding this class of in, this indicates that this is the panel we want open when the page loads. So, all of your other Accordion panels are not going to have this class on in, but they will of course have the classes of panel collapse and collapse. So that's the start of this div and it's going to close just after line 77 here. So /div. And let me indent this paragraph here. There, that makes it a little easier to read. Since we had a panel heading, we're also going to have a panel body.

So after line 75, we're going to add another div here with a class of panel-body. And that div is going to close on line 79. So that is the basic mark up here for one of the Accordion panels. Now what we need to do is we need to take this mark up and we need to duplicate it for the other three groups of text that we have here, in the same kind of way. You see what I mean by being a lot of mark up? So, now what I'm going to do is I'm going to go offline here, just for a moment.

I'm going to copy all of this code and I'm going to paste it in around each of these little chunks of text here. And I'm going to come back and show you what I did in just a minute. Alright, so how'd you do? Hopefully, you managed to copy this mark up on over and you've managed to mark up everything correctly. Just to show you what I have done here, here I am with my completed file. And I'm just going to show you the check-ups portion of this. I copied over all the mark-up that I had before and I changed just a couple of things. Remember the ahref that you see here in line 86, needs to point to it's own unique ID.

So, since with, this one has to do with check-ups, I called this #checkups. That corresponds to the ID that's here in line 89, where I call the ID of check-ups. And the other thing that I did was, also in line 89 inside of this div with a class of panel-collapse and collapse. I removed the item called in, the class called in, that's gone. So that class called in you'll see up here in line 75 that's associated with the vaccinations, but it's not here in line 89. And that's because remember, in is going to correspond to the panel that is open when you initially open the page.

Now, unlike the tabs, there's no need to initialize anything down in the JavaScript at the bottom of the page. So down here at the bottom, there's just our calls to jQuery and to Bootstrap. And that's all we need to do down here at the bottom of the page. So if you'll go ahead and save this, and then open it up in your web browser. Go ahead and refresh. And scroll on down to the bottom here. You should now see your Accordion panels. So here were are with Vaccinations, Checkups, Senior Pets, and Diet Plans. And as you click on those words, you should see the little blurbs of text plus the read more buttons coming up here.

If they're not quite working correctly, the first thing then I would double check is to make sure that you have your IDs set up correctly. Make sure that you are calling the right ID in the link, and that, that's corresponding to the right ID inside of the text that you want to have appear. It's very easy as you're copying and pasting markup to forget to change those IDs, so that's probably the first place you're going to make a mistake. And then also I'd double check to make sure all of your divs are nested correctly. That's another thing that's very easy to mistake, because there's so many divs that are involved in putting together an Accordion panel.

Markup is very complicated, so make sure that all of your divs are closed correctly. And again, if you need to, I have given you my markup inside of your exercise files folder, so that you can take a look at that and compare if you have any other errors that you need to take a look at.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 3
Up and Running with Bootstrap 3

37 video lessons · 23036 viewers

Jen Kramer
Author

 
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
      58s
    2. Using the exercise files
      1m 19s
    3. Installing Sublime Text 2
      3m 8s
  2. 29m 0s
    1. What is Bootstrap?
      8m 1s
    2. Downloading and unzipping Bootstrap 3
      4m 31s
    3. Examining Bootstrap file structure
      4m 34s
    4. Adding CSS to a Bootstrap HTML file
      4m 35s
    5. Adding JavaScript to a Bootstrap HTML file
      7m 19s
  3. 44m 38s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      14m 5s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 34s
    5. Nesting columns
      3m 43s
    6. Creating a JumboTron-style layout
      3m 41s
    7. Challenge: Working with grids
      1m 31s
    8. Solution: Working with grids
      1m 52s
  4. 53m 34s
    1. Exploring basic typography: The small and blockquote tags
      4m 29s
    2. Exploring Bootstrap's responsive classes including .hidden and .visible
      4m 44s
    3. Styling buttons using btn classes
      4m 43s
    4. Styling images with responsiveness and decorative touches
      5m 22s
    5. Incorporating Bootstrap 3 glyph icons
      3m 28s
    6. Creating a thumbnail gallery
      6m 2s
    7. Styling tabular data
      5m 3s
    8. Overriding core CSS with custom styles
      12m 53s
    9. Challenge: Styling panels and callouts
      2m 17s
    10. Solution: Styling panels and callouts
      4m 33s
  5. 27m 41s
    1. Implementing location breadcrumbs
      6m 38s
    2. Using tabs and pills for navigation
      6m 58s
    3. Developing a responsive navigation bar
      9m 9s
    4. Challenge: Modify the "pancake" button
      1m 3s
    5. Solution: Modify the "pancake" button
      3m 53s
  6. 37m 45s
    1. Implementing dropdowns within a navigation bar
      5m 5s
    2. Tabbing within the same page
      15m 45s
    3. Accordion panels with collapse functionality
      11m 37s
    4. Challenge: Tooltips
      1m 59s
    5. Solution: Tooltips
      3m 19s
  7. 3m 0s
    1. Next steps towards advanced Bootstrap
      3m 0s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 3.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.