How to Create an 'FAQ' Drop-Down Menu
-
Hi there,
I’m working on some ‘possible questions you might have’ on my site and would like to make the answers appear as a drop-down.
Currently, the page looks like this:

But I would like viewers to have the option to click on the question they want the answer to, and then the answer would appear as a drop-down, for example, as on the WordPress.com support document FAQs about domains (https://wordpress.com/support/manage-purchases/#frequently-asked-questions):


How do I go about doing this? Will this require a different theme or custom CSS?
From searching the forums it looks like, if this is possible, it requires a plugin. If it does, are the steps described at https://wordpress.com/support/splitting-content/page-jumps/ the best alternative for sites with a free plan?Thank you in advance for any advice.
The blog I need help with is: (visible only to logged in users)
-
Hi! Sure, here’s some HTML for that:
https://wordpress.com/support/advanced-html/#collapsible-content-accordion-effectAlso as a side note, the Business Plan also includes a bunch of extra blocks built in, including an accordion block.
https://wordpress.com/support/wordpress-editor/blocks/coblocks/ -
Thanks @supernovia!
Do I need to specifically use an ‘HTML block’ to put that in? (I tried adding it to the code editor, then went back to visual, and it told me to change it to blocks, and it became an HTML block.)
I’ve previewed the page (after changing to an HTML block) and it looks like what I wanted. Thanks!
-
Also, if I do need an HTML block, am I able to put the HTML for each question in the same block, or do I need separate HTML blocks for each question?
-
Sorry! I worked out that I don’t need separate blocks.
Please could I ask though — is there a way to space out the questions? I suppose I can do this by having separate blocks and adding spacers between them, but is there any HTML to do this so I can keep it all in one block?
-
Really sorry, I have another question. How do I create links within the HTML? Is it something like
<a </a>?
And how do I make these links open in a new tab? -
In HTML a link would be:
<a href="https://wordpress.com/forums/topic/how-to-create-an-faq-drop-down-menu/">this thread</a>And, for opening it in a new window:
<a href="https://wordpress.com/forums/topic/how-to-create-an-faq-drop-down-menu/" target="_blank">this thread</a> -
Thanks staff-blorbo!
Is the HTML for spaces `<!– wp:spacer {“height”:20} –>
<div style=”height:20px” aria-hidden=”true” class=”wp-block-spacer”></div>
<!– /wp:spacer –>`? -
That will work, yes, that’s the code for the Spacer block: https://wordpress.com/support/wordpress-editor/blocks/spacer-block/
The easiest way to get the HTML for all of these is to add the elements in the visual part of the editor, then switch to the code part: https://wordpress.com/support/wordpress-editor/#more-options
-
- The topic ‘How to Create an 'FAQ' Drop-Down Menu’ is closed to new replies.