How to Create an 'FAQ' Drop-Down Menu

• 

  writer0001 · Member · Jul 1, 2020 at 4:18 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  supernovia · Staff · Jul 2, 2020 at 2:42 am

  • Copy link

  Hi! Sure, here’s some HTML for that:
  https://wordpress.com/support/advanced-html/#collapsible-content-accordion-effect

  Also 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/

• 

  writer0001 · Member · Jul 2, 2020 at 1:00 pm

  • Copy link

  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!

• 

  writer0001 · Member · Jul 2, 2020 at 1:03 pm

  • Copy link

  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?

• 

  writer0001 · Member · Jul 2, 2020 at 1:13 pm

  • Copy link

  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?

• 

  writer0001 · Member · Jul 2, 2020 at 1:18 pm

  • Copy link

  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?

• 

  staff-blorbo · Staff · Jul 2, 2020 at 6:39 pm

  • Copy link

  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>

• 

  writer0001 · Member · Jul 2, 2020 at 7:14 pm

  • Copy link

  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 –>`?

• 

  staff-blorbo · Staff · Jul 2, 2020 at 7:16 pm

  • Copy link

  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

• 

  writer0001 · Member · Jul 2, 2020 at 7:19 pm

  • Copy link

  Thanks!