Build Your Own Business Website header image

How to Create an FAQ Page Using Collapse-O-Matic Plugin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to create an FAQ page in which the title of a section will collapse and show the rest of the FAQs information. You can easily accomplish that using a Collapse-O-Matic Plugin which allows you to expand and collapse content. We also show how install and use the plugin.

Video Transcript

Rick: Good morning, Heidi. I’ve just unmuted your microphone.

Heidi: Good morning.

Rick: How are you doing?

Heidi: Well, the sun isn’t shining. It’s snowing so I’m doing fine.

Rick: You know, it’s not snowing here but it is a little grey and icky looking. Okay so tell me your question.

Heidi: Well basically, I’d like to create a frequently asked questions page where you have at the top, a list of questions and depending on which one you click, you’d jump down to the appropriate place in the place where the answer is. It’s… one could do that with links and then anchors in the different place in the document but that’s one, a lot of work and two, it means I have to do it and the other people in the condominium complex would say, “No, it’s too difficult” for them. So I’d like something that’s more easy to do, to use.

Rick: And you wouldn’t want to do that with shortcodes either then, would you?

Heidi: No, shortcodes could work. I would be thinking of, I don’t know, maybe some javascipt like a concertina or accordion kind of thing. Or maybe even have custom… oh my goodness. Old age is terrible. Custom post types but as long as it’s easy to use, I’m not averse to…

Rick: Yeah well, you’re right actually that custom post types would be an interesting solution to that because you could have the question be the title and the answer be the content. And then have the FAQ page display all the titles. Now whether or not you can get the FAQ page to also display all of the content and jump down, that’s another subject altogether. I was thinking more along the lines of having a list of questions and when you click on the question, the answer drops down below it. So the answer showed up below the question immediately then when we come to click it then it goes away and you can… you never leave the page. You’re always on the same page but…

Heidi: That sounds ideal.

Rick: Okay so in that case then, what I would recommend is a plugin called Collapse-O-Matic. I love the name of this plugin. But let’s see, let’s… you know, I’m going to be demonstrating on this page, this site anyway. Maybe we’ll just do that here. Sample page, yeah okay. Perfect.

So WP and then let’s see, so we’ll install the plugin, Collapse-O-Matic and then if we go back over to that page for a second, let’s say we have here our first question. And then we need a bunch of… let’s see, Lorem Ipsum text. Actually, I’m just going to grab that. So no, that’s not what I wanted. Open the kitchen sink and then paste from Word.

Okay so first question, we’ll just copy this and this will be 2nd question. Now the next part of this is adding the Collapse-O-Matic shortcodes to this. And I… let’s see whether or not there is a… yeah, I’m guessing that this plugin doesn’t actually have a help screen that shows up here. So we’re going to go to its website, Collapse-O-Matic and okay, complete listing of shortcode options and attribute demos. And so the easiest shortcode is actually this one here. Oddly, it appears to show it has a double… I just copied that one and it had a double…

Heidi: It’s probably a typo.

Rick: Yeah, it certainly is but if we switch over to HTML view for just a second and paste that in there then what you have is your question would go inside of the title portion. So there’s your question and then the other side goes there so it’s expand title our first question and then expand. And then what you have… and then this should collapse. So if we’re going to do that again for this one, expand title our second question and then that closing expand tag and hit update, view the page. Okay so here you’ve got our first question and our second question. I’m not quite sure why there’s so much space there but let’s see, let’s try that. I’m assuming it needs some kind of a paragraph mark in there or something. Let’s take a look at what’s causing that.

So then let’s see, okay so here’s our div id, target, span our first question. So it’s inside of this paragraph tag. So I guess what we need to do is give ourselves a space there so we’re entirely outside of that paragraph tag. That’s what the problem was, I think. It’s interesting. Well, at least it’s pulled away. I’m sure there’s a way to adjust the… yeah, I guess the thing here then is… because placing it inside of paragraph and… well, it’s wrapping the entire thing in a paragraph and then… that’s weird. So that would be something worth trying to figure out because it almost feels like the 3rd question wouldn’t do that. If we do this again, it almost feels like it’s past our 3rd question and it’s past the paragraph mark. Once it gets past the first question… yeah. Okay so maybe we just need to put another space in there. That’s all we have to do.

Heidi: That’s weird.

Rick: Yeah, we’re just trying to get out of the paragraph. No, look at that. It’s still there. You know, maybe what we need to do is break this, just give it a div class equals and we’re just going to… this is going to…

Heidi: Could be anything, yeah…

Rick: Just make WordPress respect that. There, that’s it. Now there’s tons of options for this thing. That is, if you don’t want this, right now what it’s done is it’s put it inside of a span tag and… but you could just as easily, you know, make that into something else. So you could make it a you know, an h4, for example. If you wanted to make it… now that might be just making it that much more complicated for your user. I mean, for your user, what they need to do is just you know, put the tag in and then for the title, you put the title of the question in and you close it off with the expand. So for the user, this is fairly simple.

Heidi: I will go with that. That works.

Rick: Okay. This is… this does give you a lot of you know, choices. And so you could… let’s see, where is that? You can do some crazy stuff like add your own… well, here’s that tag attribute. So instead of tag h2, we could say tag h4. You know, and tag h4… but it could actually be tag h… you know, what happened when I do that? Did I copy some weirdness in there? No. Perfect. You know, you never quite know for sure. The latest version of WordPress has settled down a bit on the text editor but… so now we have spacing because our h4 has space but nevertheless you know, that’s how you can add additional information to that or change up the class or the element by adding a tag there. And once you do that then it changes the… it doesn’t use a span tag anymore than it switches…

Heidi: Right. Yeah, that seems easy enough. The only downside is your pan’s sorted so you’d have to put the questions just you know, in alphabetic order. But that’s not a problem.

Rick: Well, yeah. I mean, you put them in whatever order you thought was appropriate. I mean, but they’d have to actually be placed in the order. You are not going to be able to stick them in.

Heidi: That sounds… it looks elegant enough. I like that.

Rick: Yeah. I was pretty… I was actually looking for this… solution like this in a different context and I didn’t end up using it in that context but I fell in love with the name, Collapse-O-Matic. So I figure we can find some opportunity to use it.

Heidi: Great. Thank you very much.

Rick: You’re welcome.

Heidi: Thanks.

Rick: Okay. Have a good day.

Heidi: You too.

Rick: Goodbye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment