I was looking at StudioPress website and noticed a sleek FAQ section on their ‘Create A Site’ page. I thought it was an excellent solution to an FAQ, so I dove into the Inspector and began to understand how it was put together. It used a simple javascript to change a class to show or hide the answer to the question once clicked. I had a need for a similar solution, so I thought I would share my experience.
The Code
First create a file for the javascript in your theme. I generally recommend using a directory for all javascript. In this example, I called the file toggle.js. In this file place the following javascript:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function( $ ){ | |
| $('.faq-list .question').click( function(){ | |
| $(this).parent().find('.answer').slideToggle('fast'); | |
| $(this).toggleClass('on'); | |
| return false; | |
| }); | |
| }); |
Now we need to enqueue that file into our theme. So open your themes function.php and add the following:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Enqueue Scripts | |
| add_action( 'wp_enqueue_scripts', 'load_toggle_javascript' ); | |
| function load_toggle_javascript() { | |
| wp_enqueue_style( 'dashicons' ); | |
| wp_enqueue_script( 'toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array( 'jquery' ), '1.0.0' ); | |
| } |
This now loads the toggle.js script to our website. You’ll also notice we have included the ‘dashicons’ from WordPress. These icons are preinstalled with WordPress, but to use them on the front end of your site, you need to enqueue them in functions.php.
Now its time to add the HTML on the page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul class="faq-list"> | |
| <li><a href="#" class="question">Question One</a> | |
| <div class="answer"> | |
| <p>Answer to Question One.</p> | |
| </div> | |
| </li> | |
| <li><a href="#" class="question">Question Two</a> | |
| <div class="answer"> | |
| <p>Answer to Question Two.</p> | |
| </div> | |
| </li> | |
| <li><a href="#" class="question">Question Three</a> | |
| <div class="answer"> | |
| <p>Answer to Question Three.</p> | |
| </div> | |
| </li> | |
| <li><a href="#" class="question">Question Four</a> | |
| <div class="answer"> | |
| <p>Answer to Question Four.</p> | |
| </div> | |
| </li> | |
| </ul> |
You can ad as many <li> list as you need for your list. You would simply change the Question and the Answer area to match your specific needs. This should be added in the editor section of your WordPress post or page. If you add HTML in your visual editor, WordPress assumes you want to display the information as text. So make sure to click the Text tab in the editor and place the HTML in the text editor. You can jump back to the Visual Editor to make edits your questions and answers.
Now its time to update the style.css file in your theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* # FAQ | |
| ——————————————— */ | |
| .entry-content .faq-list, | |
| .entry-content .faq-list li { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .entry-content .faq-list ul { | |
| margin-left: 0; | |
| } | |
| .entry-content .faq-list li { | |
| border: none; | |
| border-radius: 3px; | |
| background: #fff; | |
| margin-bottom: 15px; | |
| -webkit-transition: all 0.3s ease-in-out; | |
| -moz-transition: all 0.3s ease-in-out; | |
| -ms-transition: all 0.3s ease-in-out; | |
| -o-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| -webkit-box-shadow: 0px 5px 30px 0px rgba(38,50,56,0.15); | |
| -moz-box-shadow: 0px 5px 30px 0px rgba(38,50,56,0.15); | |
| box-shadow: 0px 5px 30px 0px rgba(38,50,56,0.15); | |
| } | |
| .entry-content .faq-list li:hover { | |
| -webkit-box-shadow: 0px 3px 10px 0px rgba(38,50,56,0.15); | |
| -moz-box-shadow: 0px 3px 10px 0px rgba(38,50,56,0.15); | |
| box-shadow: 0px 3px 10px 0px rgba(38,50,56,0.15); | |
| } | |
| .entry-content .faq-list li .question { | |
| display: block; | |
| font-weight: 500; | |
| border: none; | |
| padding: 25px 35px 22px 60px; | |
| position: relative; | |
| } | |
| .entry-content .faq-list li .question.on { | |
| background: #F5F7F8; | |
| border-top-right-radius: 3px; | |
| border-top-left-radius: 3px; | |
| color: #263238; | |
| } | |
| .entry-content .faq-list li .question:before { | |
| content: "\f132"; | |
| font-family: "dashicons"; | |
| color: #CFD8DC; | |
| left: 25px; | |
| margin-right: 10px; | |
| position: absolute; | |
| top: 29px; | |
| } | |
| .entry-content .faq-list li .question.on:before { | |
| content: "\f460"; | |
| font-family: "dashicons"; | |
| } | |
| .single-post .entry-content .faq-list li .answer { | |
| border-top: 1px solid #ECEFF1; | |
| display: none; | |
| font-size: 16px; | |
| padding: 25px 35px 25px; | |
| } |
Test It Out
Now you should be able to publish your page or post and you will have this sleek toggle feature for your FAQ. It has plenty of possibilities.
Let me know what you think in the comments below. If you have any questions or suggestions for other tutorials, please leave those in the comments below also.
Leave a Reply