- Read Tutorial
- Watch Guide Video
I have our about us page opened up right now and I want these components to be below the paragraph. I'm going to come down and give ourselves another paragraph tag. Here I'm going to create a button component I'm going to say button and because I'm going to be putting so many items in this I'm actually going to give ourselves a button and then put a few lines here because it is actually going to take up a few lines of code in order to get this working.
<p> <button class= "btn btn-primary" type="button" data-toggle="collapse" data-target="jobHistory" aria-expanded="false" aria-controler="jobHistory" > Job History </button> </p> <p> <div class="collapse" id="jobHistory" > <div class="card card-block" > Job 1 </div> <div class="card card-block" > Job 2 </div> </div> </p>
margin-top: 5px; and
margin-bottom: 5px. See if that selects the right component. If I hit refresh, when we click this button it should pop up. There we go. Now it has some nice space in between not too much but you could do something like put the year of the job the title The description anything that you want I'll leave that up to your creativity. This is job history but we're not limited to only putting one button there we can come in and we can just duplicate this. We can create another one.
<p> <button class= "btn btn-primary" type="button" data-toggle="collapse" data-target="education" aria-expanded="false" aria-controler="education" > Education </button> </p> <p> <div class="collapse" id="education" > <div class="card card-block" > School 1 </div> <div class="card card-block" > School 2 </div> <div class="card card-block" > School 3 </div> </div> </p>
This one's not going to be job history. This one can be education and the text is going to say education. Then we can just create another component here and now instead of job history this is going to say education. Here we can say school 1 and school 2. Just to show that you're not limited to one, two or three we can do another one here and say school 3. If I hit refresh if we click education you can see the this all pops up. If I click job history, it will actually show all of that too which I think is kind of cool where you're going to be able to have all of this popping up and it will all toggle exactly how the user wants to see it. Definitely feel free to go through. I personally, because I've written a few books and I have a number of courses and things like that. I'm going to go when we get into production. I will go and add some additional buttons but this should give you a good head start on what you want to put in there and essentially making it look like your resume I think is the best approach.
git status. It looks like those are the two items we wanted to change. Now I can say
git commit -m "Updated about page to have collapsible code",
git push origin final-changes. If we go to pivotal tracker we can cross off this additional information about pages. In the next guide, we're going to walk through how we can add skills onto our page. We're going to have all of our skills shown right here. I will see then.