Usually, a FAQ page is that long page with lots of questions and answers, the one we are searching for when we need some extra info regarding a subject. So, for example, if you own a website that sells stuff, then you will need a page like that.
When I visited Facebook’s Help Center section (theirs FAQ’s), I noticed a cool effect for the answers previews. They show a small, faded and clipped text preview for the answer, and then, when the question is clicked, the complete answer is revealed.
After seeing it, of course I immediately thought about how can I create a similar effect using CSS3 only. So, further you’ll see how I made it.
We will start as usual with the markup structure:
In the above image, the label is the proper heading of the section. But, if you want to use better semantic, you can wrap the
label::beforeallow us to create the right triangle shape. On a side note, double colon for pseudo-elements is the CSS3 way.
The first paragraph for each section is the intro preview for the complete answer. For this example, I used the adjacent sibling combinator to target it.
How it works?
There’s no rocket science here. The technique we will use today is called the checkbox hack and it relies on the ability of toggle-ing an
<input type="checkbox" id="abc"> using the
<label for="abc">. Also, in the same time, the checkbox input will be hidden.
I played before with this cool technique, but never had the opportunity to create a practical example actually. So, this is my shot! :)
If you want to read more about this technique, Chris Coyier wrote a while ago an article where he shows some cool stuff you can do with the checkbox hack.
Below you have the styles, I commented some lines for a better understanding:
What about the older browsers? That’s a normal question, and the answer is graceful degradation:
Using the following snippet, we’re targeting browsers like IE8 and below. So, we’ll enable the HTML5 elements like
section and then add some custom styles in order to keep the FAQ’s content readable.
Update: i0S support
You asked for it, now you have it: iOS browser support. I had some time to think about it and I made updates regarding hiding the checkbox.
Here’s my fix, tested on iPhone and iPad using the latest iOS versions:
position: absolute- While
.faq-sectionwrapper is relative positioned, we’ll need this to visually place our checkbox above the label.
z-index: 2- Make sure it will be above section content, including label.
cursor: pointer- Optionally, this will add a pointer cursor when you hover on it.
display: none\9- Visually hide the checbox, while on browsers like Internet Explorer 8 and below will be hidden.
margin: 0- Remove default margin.
height: 36px- The checkbox height value matches the height of the label. Also, using 100% for the width will expand the checbox in order to fully cover the label.
That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.
CSS3 ordered list styles
CSS pitfalls and how to overcome them