{"id":216,"date":"2022-04-16T20:12:43","date_gmt":"2022-04-16T20:12:43","guid":{"rendered":"https:\/\/apaddedcell.com\/?p=216"},"modified":"2022-04-16T20:29:20","modified_gmt":"2022-04-16T20:29:20","slug":"creating-a-semantic-faq-page-with-definition-lists-and-advanced-css-part-2","status":"publish","type":"post","link":"https:\/\/www.apaddedcell.com\/creating-a-semantic-faq-page-with-definition-lists-and-advanced-css-part-2\/","title":{"rendered":"Creating a semantic FAQ page with definition lists and advanced CSS, Part 2"},"content":{"rendered":"\n
And now for a more interesting layout of the FAQ page with CSS<\/h2>\n\n\n\n
Usually the FAQ page is a long text with lots of questions and answers. This page is looked for when you need more information on how the site works. In this tutorial we will make a stylish FAQ page using CSS3 only, without using JavaScript.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Idea<\/h2>\n\n\n\n
Help Center Facebook uses a great effect to preview the answer to a question. It displays an excerpt in small, darkened font. And when the visitor clicks on the question, the answer text is enlarged and displayed in full.<\/p>\n\n\n\n
In our tutorial, we will create a similar effect using only CSS3.<\/p>\n\n\n\n
HTML<\/h2>\n\n\n\n
Let’s start by marking up the structure of the document:<\/p>\n\n\n\n
<section class=\"faq-section\">\r\n\r <input type=\"checkbox\" id=\"q1\">\r\n <label for=\"q1\">Question?<\/label>\r\n <p>... An introductory paragraph that will be trimmed ...<\/p>\r\n <p>... Additional Information ...<\/p>\r\n<\/section>\r\n<\/code><\/pre>\n\n\n\n
<\/figure><\/div>\n\n\n\n
In the figure above you can see that the label will be the header of the section. But you can put the label in h1 if you want to follow the rules of semantics.<\/p>\n\n\n\n
Use label::before <\/strong>to create the triangle on the right.<\/p>\n\n\n\n
The first paragraph of each section will be converted into a descriptive answer passage to the question.<\/p>\n\n\n\n
Principle of operation<\/h3>\n\n\n\n
No rocket technology is used here. There is a checkbox trick involved here to bind the elements\u00a0\u00a0<input type=\"checkbox\" id=\"abc\"><\/code>\u00a0\u0438\u00a0<label for=\"abc\"><\/code>. And the checkbox itself is hidden from the eyes of the page reader.<\/p>\n\n\n\n
CSS<\/h2>\n\n\n\n
\/*Adding fields*\/\n.faq-section{\n margin: 40px 0;\n}\n\/*Hiding checkboxes and paragraphs*\/\n.faq-section input,\n.faq-section p{\n display: none;\n}\n\/*Showing only the trimmed introduction *\/\n.faq-section label+p{\n display: block;\n color: #999;\n font-size: .85em;\n transition: all .15s ease-out;\n \/* Clipping text *\/\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n\/*If the checkbox is checked, we show all paragraphs*\/\n.faq-section input[type=checkbox]:checked~p{\n display: block;\n color: #444;\n font-size: 1em;\n \/* Restoring the default clipping *\/\n text-overflow: clip;\n white-space: normal;\n overflow: visible;\n}\n\/*Styles for the label*\/\n.faq-section label{\n font-size: 1.2em;\n cursor: pointer;\n background: #eee;\n display: block;\n position: relative;\n padding: 7px 10px;\n font-weight: bold;\n border: 1px solid #ddd;\n border-left: 3px solid #888;\n text-shadow: 0 1px 0 rgba(255,255,255,.5);\n transition: all .15s ease-out;\n}\n\/*Removing text selection when switching*\/\n.faq-section label::selection{\n background: none;\n}\n.faq-section label:hover{\n background: #f5f5f5;\n}\n\/*If the checkbox is checked, set the styles accordingly*\/\n.faq-section input[type=checkbox]:checked~label{\n border-color: #ff7f50;\n background: #f5deb4;\n background-image: linear-gradient(to bottom, #fff, #f5deb4);\n box-shadow: 0 0 1px rgba(0,0,0,.4);\n}\n\/*Label arrow - default state*\/\n.faq-section label::before{\n content: '';\n position: absolute;\n right: 4px;\n top: 50%;\n margin-top: -6px;\n border: 6px solid transparent;\n border-left-color: inherit;\n}\n\/*Update the arrow on the right*\/\n.faq-section input[type=checkbox]:checked~label::before{\n border: 6px solid transparent;\n border-top-color: inherit;\n margin-top: -3px;\n right: 10px;\n}<\/code><\/pre>\n\n\n\n
Browser support<\/h2>\n\n\n\n
How about displaying our page in older browsers? That’s a great question. And the answer is an acceptable degradation in appearance:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
With the following code, we take care of browsers IE8 and older to preserve our page content for visitors using older tools.<\/p>\n\n\n\n
Toggling content on and off using JavaScript<\/h3>\n\n\n\n
Another way to do this would be to keep the answers (dd’s) hidden until the user clicks on the question (dt). Clicking on the dt would dynamically show the answer to the question. Using JavaScript is always a little bit risky, but this would provide a much cleaner interface. Let’s try it.<\/p>\n\n\n\n
First we need a script that will hide and show stuff. We could wrap all of our questions in links that would call a JavaScript function to show the answer. But we don’t want to have to go through the whole document and add those in. It could get messy, and there are many opportunities to make mistakes. Instead, what we want to do is call a function when the dt tags are clicked on that would display the dd’s.<\/p>\n\n\n\n
The first thing we are going to do is create some classes in our CSS to make things turn on and off. We could do this directly in the JavaScript but this way we won’t have to repeat it and we can re-use the class whenever we want. Put this into your CSS:<\/p>\n\n\n\n
Now we can start the JavaScript. In a new .js file, we will start by finding our questions and answers and puting them into two variables. To do this we will use the getElementsByTagName property. This will put all of the elements in an array (remember that, we’ll need to know that later).<\/p>\n\n\n\n
var questions = document.getElementsByTagName('dt');\nvar answers = document.getElementsByTagName('dd');<\/code><\/pre>\n\n\n\n
Before we forget, we need to put in a link to our new .js file from our HTML page:<\/p>\n\n\n\n
Next we will write a function to go through the questions and turn the corresponding answer on when the question is clicked. The function will loop through all the questions (from the questions array variable we already defined), set an onclick handler for each question, and apply a function that will apply the .hide and .show classes to toggle the answer on and off. I have modified this code from\u00a0BonRouge’s Unobtrusive javascript toggle scripts. It looks like this:<\/p>\n\n\n\n
function displayToggle(){\n for (i=0; i<questions.length; i++) { \/\/ loops through the questions\n\n questions[i].onclick=function() { \/\/ displays the question \n on clickvar next = this.nextSibling;\n \/\/ if it gets to a non-element node, go to the next \n while(next.nodeType != 1) next=next.nextSibling; \n onenext.className=((next.className==\"hide\") ? \"show\" : \"hide\");\n }\n }\n}<\/code><\/pre>\n\n\n\n
We want to call this function when the page loads, so we need to add in the following code:<\/p>\n\n\n\n
Great, this does almost everything we need it to. The problem we have now is that all the answers are displayed at the start, and we want them to be hidden. We also want to add some links to display all the answers and hide them all again. I’m mentioning this now because we are going to use the same functions to do both.<\/p>\n\n\n\n
The functions we need will take all the answers and turn them on and off all at once. To do this, we will use the answers variable we defined earlier, loop through the array, and set some functions to put in our .show and .hide classes.<\/p>\n\n\n\n
Here is the code:<\/p>\n\n\n\n
\/\/ function for the link that turns them all off\nfunction toggleAllOff(){\n for (var i = 0; i < answers.length; i++) {\n answers[i].className = 'hide';\n }\n}\n \n\/\/ function for the link that turns them all on\nfunction toggleAllOn(){\n for (var i = 0; i < answers.length; i++) {\n answers[i].className = 'show';\n }\n}<\/code><\/pre>\n\n\n\n
Now we can put two links in our faq page to turn all the definitions on and off:<\/p>\n\n\n\n
<a href=\"#\" onclick=\"JavaScript:toggleAllOn();\">Show all answers<\/a>\n<a href=\"#\" onclick=\"JavaScript:toggleAllOff();\">Hide all answers<\/a><\/code><\/pre>\n\n\n\n
Check it out! Hide all the answers, show all the answers. To start the page with all answers turned off, we just need to call the toggleAllOff function in the displayToggle funcction that we’re calling when the page loads, so we need to add one more line to our displayToggle function:<\/p>\n\n\n\n
function displayToggle(){\n \/\/ calls the toggle all off function \n \/\/ to turn all the answers off when the page is loaded \n toggleAllOff(); \n\n for (i=0; i<questions.length; i++) { \/\/ loops through the questions\n questions[i].onclick=function() { \/\/ shows the answers onclick\n var next = this.nextSibling;\n \/\/ if it gets to a non-element node, go to the next one\n while(next.nodeType != 1) next=next.nextSibling; \n next.className=((next.className==\"hide\") ? \"show\" : \"hide\");\n }\n }\n}<\/code><\/pre>\n\n\n\n
Ta-da! A collapsible FAQ page that degrades gracefully and uses proper web standards!<\/p>\n\n\n\n
There are just a few more things I need to do to the CSS to make this page look a little nicer. I’ll make my letter smaller, and add some padding around the section headings so they don’t run into the definition lists.<\/p>\n\n\n\n
Here is the\u00a0final result\u00a0and here is the\u00a0page in actual use. In the latter example I modified the JavaScript to make the list sections collapsible rather than just the individual questions.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article I will tell you how using CSS3 to create a very attractive and compact version of such a page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,11],"tags":[],"_links":{"self":[{"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/posts\/216"}],"collection":[{"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":5,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/posts\/216\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.apaddedcell.com\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430](\"https:\/\/ruseller.com\/lessons\/les1380\/img_1.png\" "\\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430")
<\/figure><\/div>\n\n\n\n![\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430](\"https:\/\/ruseller.com\/lessons\/les1380\/img_2.png\")
<\/figure><\/div>\n\n\n\n![\"\u0412\u0438\u0434](\"https:\/\/ruseller.com\/lessons\/les1380\/img_3.png\" "\\"\u0412\u0438\u0434")
<\/figure><\/div>\n\n\n\n