Building Page5

Just like I made the 4^th section of the website, I split the page into two sections, the Q&A section and the questions section.

Q&A Section

For this section, I further split it into 3 sections: the main outline of the box “faqSectionSub”, the clickable box “faqOuter”, and the content “faqInner”.

HTML Code for Q&A Section

For the main outline of the box “faqSectionSub”, all I did was add a simple margin outside of it to prevent it each boxes from touching each other “margin-top: 75px; margin-bottom: 75px;”.

For the clickable section, I gave the text color (‘color: #878787;’) a darker shade of white, whilst for the background, I gave it a lighter shade (‘background-color: #E7E7E7;). For the aesthetics I changed the font-weight to 500 and increased the font-size to 20pt. Furthermore, I added padding to the div to prevent the text from touching the side of the box.

CSS code for the clickable title

I then made added a new pseudo-class which allowed the button to change color when a cursor was hovering over it.

New Pseudo Class

When creating the content section, I first made a text box with Lorem Ipsum. I added appropriate padding to it and added a border to make the box stand out.

Once the two section were created I had to merge them together. At first I tried changing the z-index but that didn't work. I later found out that the title had to have be "position: absolute" if I were to overlap the two of them. By making the title's position absolute and giving the content box a margin of -25px, this solution worked but created another issue at the same time. When the titles are stacked together, if you make their "position: absolute" then it won't move when the 'content' div opens up.

After posting this problem on Stackoverflow, someone suggested that I could look into jQuery UI. Apparently, jQuery UI has an accordion effect which is really similar to what I was creating.