We can create collapsible elements that give the user the ability to show or hide content on a web page.
This example shows how a collapsible works when we click the collapse button.
The content appears when we click it again it disappears.
In order to create this we start with a button element.
There are two important attributes that must be included for this to work the data toggle attribute.
You can see that we have it set to collapse and the data target attribute.
And this needs to be set to the I.D. of the div that can change the collapsible content.
So here's the div that contains the content and you can see that we've given it an I.D. of X1 that matches
the data target.
Just remember to keep a pound sign in front of the value so these two must match in order for this to
work.
In addition to the x 1 I.D. that we have here you also have to create a class and set it to collapse
next.
Just insert the content that should be displayed when the button is clicked so you can see we have some
sample text here and when we click the collapse button the text appears when we cook it again it disappears
in the second example
we've used the eight element instead of a button element like we did in the first example.
We can see that.
If you want to use an element you need to set the H R you f attribute to the I.D. in your development
so if those two don't match then the collapsible will not work.
If you're using an element in addition to that you also need to include a data toggle equals collapse
attribute
and you can see that we've given the link a name.
Simple collapsible and that's what appears on the button
just like the previous example your content goes inside your div element.
So here you can see the sample text in the sample text hides it appears on click.
One thing you'll notice is that by default the text is hidden.
If you want the text to be visible by default.
We'll start with the first one here inside your div element next to the collapse class.
Just put in the in the class and I'll save the file and you can see that the text is now visible by
default and that's again that's the in class.