Using Bootstrap JavaScript Plugins
If we want to add behavior to our website, which of the following will NOT work?
-
Updating our HTML with
dataattributes that the Bootstrap JavaScript Library requires. -
Adding Bootstrap CSS classes to our HTML that the Bootstrap Library requires.
-
Writing JavaScript to perform the behavior.
Screen Readers
If we have content that we want to be hidden for visual browsers but show up for screen readers, what class should we use?
Answer: sr-only
Accordion to Schedule
The Transportation Safety Board has mandated that we add a few requirements to our site. Apparently it’s some kind of law that we need to disclose safety concerns. Complete the following tasks to implement an Accordion using the Bootstrap Collapse Plugin so we don’t scare people all at once.
Blasting Off With Bootstrap The Fastest Way to Space
Make your way to space in the comfort of your own rocket, elevator or transporter.
Book Today!
Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.
Go Anywhere
If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!
RocketBus®
For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.
Any sufficiently advanced technology is indistinguishable from magic.
Our Transport Systems
Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.
Transporter
- 8 second travel time
- Chance of death only 1 in 7,593
- Low price of only $15.99!
Space Elevator
- 8 hour scenic ride
- Only 1 horrific death per 12,456
- Only $45.99 if you book today!
RocketBus
- 8 minute scenic ride
- Plunging death rate of under 1/100k
- $74.99 lets you blast off today!
A dream that became a reality and spread throughout the stars.
Plan Your Trip Today!
Todays Time here
Deals here
Forecast
All systems are operational
- Transporters
- Space Elevator
- RocketBus
The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:
- February 9th, 21:43
- May 18, 19:82
- July 4, 08:42
Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.
To start off, let’s hide all the content within each panel for when the page loads. Don’t hide the panel titles though – those are the links. What we need to do is start the body of each accordion item as collapsed.
Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.
Now all of the panels are collapsed when the page loads! Add a class of in to the body of the "All Systems Operational" panel to make sure it shows when the page loads.
If you're curious how this in class works with the Collapse Plugin, read the.
All systems are operational
We're getting somewhere! The page looks correct when it loads, but our links don't do anything yet. Let's make the 2nd panel functional first – the "Weather Alert".
Update the "Weather Alert" link to use the Collapse Plugin. You'll need to add 2 data attributes to the link to make this work.
The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:
- February 9th, 21:43
- May 18, 19:82
- July 4, 08:42
Convert the links for "All Systems Operational" and "Transportation Generals Warning: Transporters" to also use the Collapse Plugin.
data-toggle="collapse" data-target="#systemsOperational" data-toggle="collapse" data-target="#transportationWarning"
--------------
Blasting Off With Bootstrap The Fastest Way to Space
Make your way to space in the comfort of your own rocket, elevator or transporter.
Book Today!
Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.
Go Anywhere
If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!
RocketBus®
For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.
Any sufficiently advanced technology is indistinguishable from magic.
Our Transport Systems
Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.
Transporter
- 8 second travel time
- Chance of death only 1 in 7,593
- Low price of only $15.99!
Space Elevator
- 8 hour scenic ride
- Only 1 horrific death per 12,456
- Only $45.99 if you book today!
RocketBus
- 8 minute scenic ride
- Plunging death rate of under 1/100k
- $74.99 lets you blast off today!
A dream that became a reality and spread throughout the stars.
Plan Your Trip Today!
Todays Time here
Deals here
Forecast
All systems are operational
- Transporters
- Space Elevator
- RocketBus
The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:
- February 9th, 21:43
- May 18, 19:82
- July 4, 08:42
Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.
One Accordion at a Time
Our Accordion Component is using the JavaScript Collapse Plugin, but it’s missing something. Clicking on one link in the accordion should collapse the previously open item. In this case, we only want one panel to be open at any given time. Follow the tasks below to make this happen.
It turns out that using the data-target attribute with the Collapse Plugin manages just a single element. If you want to control multiple elements at once that share the same parent, you can instead use the data-parent attribute passing in a shared parent.
Update the "All Systems Operational" link to use this new attribute targeting the parent Panel Group element (.panel-group).
We're on the right track, but the other two panels in our accordion component don't know to collapse when the other ones are clicked. Go ahead and update the other two links to also point to the same parent.
Blasting Off With Bootstrap The Fastest Way to Space
Make your way to space in the comfort of your own rocket, elevator or transporter.
Book Today!
Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.
Go Anywhere
If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!
RocketBus®
For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.
Any sufficiently advanced technology is indistinguishable from magic.
Our Transport Systems
Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.
Transporter
- 8 second travel time
- Chance of death only 1 in 7,593
- Low price of only $15.99!
Space Elevator
- 8 hour scenic ride
- Only 1 horrific death per 12,456
- Only $45.99 if you book today!
RocketBus
- 8 minute scenic ride
- Plunging death rate of under 1/100k
- $74.99 lets you blast off today!
A dream that became a reality and spread throughout the stars.
Plan Your Trip Today!
Todays Time here
Deals here
Forecast
All systems are operational
- Transporters
- Space Elevator
- RocketBus
The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:
- February 9th, 21:43
- May 18, 19:82
- July 4, 08:42
Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.