We’ll start by adding a DIV container around the paragraph elements in each div within the aside elements. In the interest of keeping the HTML as clean as possible, we'll add text of the trigger as a data-attribute of the DIV. This give us a few advantages, including the ability to change the link text for each expanding panel, as well as allowing for any language to be inserted.
- Now the first thing we're going to do in our project is to add a little bit of HTML to our webpage. So in the browser here, this is the layout we're gonna be modifying. What we want to do is set this up so that all of this extra content for each one of these different landmarks is going to be contained in a collapsible panel. What we're gonna do is go into the HTML file and we're gonna wrap this content into a div element. Let's go back to the exercise files. Let's find the index.html file, and let's open this up in a text editor.
So inside of our HTML file here, all of our columns are inside of an HTML flag element called article, and then each column is in an element called aside. Here's the first aside here. If I scroll down here, here's the second aside. And then third third. So what we want to do is we want to take all of this descriptive content here inside of the paragraph element, which is after the h5 in each one of the asides, and we want to put this content into a div container so we can open and close this particular content.
So I'll scroll up here to the first aside element, and what we're gonna do is before the first paragraph element, I'll hit a few returns. We'll come in here and add a div element, so less than sign, D-I-V, then greater than sign. Next, I'll get my cursor after the ending paragraph tag. I'll hit a few returns, and I'll end that div tag. So now let's come up here to the beginning div tag. Let's hit a space and let's add a class, and we'll call this expanding panel.
So expanding underscore panel. Then I'll come down here and I'll just format this a little bit. I'll indent this. Get rid of my extra spaces. So now the content here that's going to be part of the expandable panel is now inside of this div element. So now I'll come up here and copy this div element. Let's scroll down to the second panel. Let's find the paragraph element. I'll hit a return.
Let's paste that here. Come down here, indent the two paragraph elements, and then after the paragraph elements, let's end that div tag. Next we'll scroll down, find the content inside of the third column. Paste our div. Indent our content. And then end the div tag. So now with this in place, we'll save the HTML. Let's go back to the browser. We'll come up and hit Reload. In the browser, we will not see any visible difference; however, now, each one of these content blocks is now wrapped inside of that div element.
Now we're also gonna have some text that's gonna indicate to the user that they can either read more or expand open the panels. Now, we don't want to add any additional HTML content. We want to add as little HTML as possible. So let's go back to our HTML file. Let's scroll up to the first column, and what we're going to do is use a data attribute to control the text that indicates to the user that they can click on this expanding panel. So inside of the div element, after class equals expanding panel, let's hit a space.
We use an HTML flag data attribute, so we'll call this data dash link dash text equals two quotes, and we'll type in Read more. Now let's come in here and copy this. Let's scroll down to the second column. Let's find the div of the class of expanding panel. Let's hit a space before the greater than sign. Let's paste in that data link, and just for demonstration purposes, let's change this to say Learn more.