Our about me page is looking much better. I definitely like what this is doing compared with what we had before. It's easier to read and I think it is more organized. You can think of your about me page almost being kind of like your online resume. This is a good spot to list out things not only about yourself but also related items such as your education, your job history, anything like that the same way you would on a resume. Technically you could simply keep on writing more content here and that is perfectly fine if you want to go with something like that. However, I think this would be a great reason to utilize the collapsible class inside of bootstrap. What it is, is a Javascript and CSS component that's going to allow us to have buttons here that we can simply press. When we press them it's going to slide down and show additional content. That is something that's pretty popular on many sites so I think that would be a good thing to walk through how to do whether you use it or not. You most likely are going to use some component like it later on in another project so it'd be good to have it here so you can reference the code.

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>

You can use any of the classes that you want depending on what color button you want next is going to be the type. Here this is just going to be a type button. Next, we're going to start with the Javascript component. I'm going to say data-toggle=collapse and then I'm going to say 'data-target'. What this is going to do is we're going to have all of our buttons and the things you can see here. Then they are going to be pointing to other components that by default are going to be hidden when you access the page and say data-target. This one is going to point to an id. Here we can say jobs or we could say job history something like that usually with your ids especially when we're dealing with CSS or Javascript you want to use camel case where you start with a lower case and then for each other word you give a uppercase value and that's kind of the standard convention. Now we have some area components, I'm going to say aria-expanded="false" and then aria-controls="job History". That's actually it for the button attributes. Here we can say job history, let's end the tag. If this looks a little bit weird. The reason why I'm doing it is because it would look much weirder if you had it look like this. If you put it all on one line and had it look like that it's much more difficult to read. Whenever you have a huge list of attributes it's kind of customary to write it in a way where you can just go down look down the list and see each one of those items. This is our button. Now this by itself is just going to give us a button. If I hit refresh you can see that we have this job history button here. But we need to tell it where this should pop up or I should say we need to give it some data so that the data can pop-up. Let's come down, we're going to create a paragraph tag and then all of these items are going to be hidden by default. But we can just create kind of placeholders for them here. I'm going to say div class collapse and the id here is going to be our job history id from right up here. Now that is our wrapper div. If I close this one out. Now I'm going to have div class card and card-block. Let's put in our content here so for this one you know this will be your list of jobs right here. Ok, now obviously you'd put your real jobs in there. But I'll leave that up to you to go through your resume and list out all of the jobs that you want. Let's come back, hit refresh. See if this is working. If I click job history you can see that now this slides up and it shows jobs. It even has some nice space in between the button and here because we put it in a paragraph tag. Let's see what happens because if have multiple jobs you're probably going to want to have multiple cards so when you say this is Job 1 this is going to be Job 2, hit save. If I hit job history you can see these pop-up. We may want to give a little bit of margin to these and that's why I added by default this card block class. Let's open up our CSS file. Coming down all the way to the bottom card-block. Let's just say a 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.

Resources

• Source Code