1 A FAQ can be effective in responding to the needs of your users, especially if it has good search functionality.
2 Potential users can learn more in a casual way. Questions that expand when clicked allows browsing without information overload.
3 Search engines will direct visitors to your website who search for a question similar to your FAQs.
The HTML source consists of headers and paragraphs, which is exactly what search engines use to crawl your website.
Using questions that people might actually Google for is an effective way to attract visitors.
A search bar is (optionally) added above the FAQ. It is backed by algorithms that sort results on different criteria, so that your users always find what they're looking for.
Many features can be configured, e.g. turning off search or collapsing. All builtin texts can also be configured.
By default, a simple effective styling is applied, which you can fully tweak with CSS to make your FAQ match the rest of your website.
You (and your users) can easily create links to individual questions. You can even create a link for a particular search.
Your FAQ does not rely on 3d party services which may track your website visitors.
This JavaScript lib is less than 10kiB.
FAQ-div is free for Open Source: licensed under a GPLv3 license, you can use FAQ-div in Open Source projects if (and only if) these projects are public and licensed under GPLv3.
For any other use, you need to purchase a commercial license. The commercial license are royalty-free, lifetime licenses, with free access to all updates. See the License Agreement for details.
The only constraint for the HTML of your FAQ is that the questions are <h3> headers.
If you use an editor, this is probably something like the "heading 3" format. In
markdown this is ### a heading.
The answers to the questions are usually formatted with paragraphs
(<p>), but any other elements (e.g. images) can also be used.
Download the FAQ-div lib and add it to your website's assets, then add the following HTML anywhere on your page (preferably in the head section):
<script src='faq-div.min.js'></script>
Alternatively, you can copy the source code and include the source directly:
<script>
...
</script>
At the moment, FAQ-div is not yet available via a CDN.
There are two possible ways to apply FAQ-div. The practical approach is to add empty divs marked as "faq-start" and "faq-end", surrounding the content of your FAQ:
<div class='faq-start'></div>
<h3> Question 1 </h3>
...
<h3> Question 2 </h3>
...
<div class='faq-end'></div>
This approach is flexible, and e.g. works well with Markdown. The "faq-end" can be omitted, in which case all following elements (within the parent element) are converted.
The other approach is perhaps more natural (from a developer point of view), but it requires a change to the structure of the HTML. Wrap the content of your FAQ in a div that has the class "faq":
<div class='faq'>
<h3> Question 1 </h3>
...
<h3> Question 2 </h3>
...
</div>
Configurarion is done using the data attributes, e.g.:
<div class='faq' data-collapse='false'>
These are the configuration opions:
data-collapse: set to "false" to show q&a items uncollapsed. Default is "true".
Set to "allbutone" to collapse the previous item when a new item is opened.data-link: set to "false" to not show the link icon when hovering over the question. Default is "true".data-search: set to "false" to hide the search element. Default is "true".data-search-placeholder: customize the placeholder text in the search input box.data-search-info: this string is displayed when the user does a search.
The text "COUNT" is replaced with the search count, and the text "SEARCH" is replaced with
the current text in the search box. You can use this to customize for other languages,
but also to e.g. display a mailto link.The root element has classname faq. (If you use a faq-start div, the content is moved into the start div, and that div gets an additional faq class name.)
Inside the root element, the Q&A items are wrapped into divs with classname qa.
In short, here are the CSS queries of interest:
.faq > .qa: A Q&A item..faq > .qa.collapsible: When the items can be collapsed..faq > .qa.collapsed: When the item is collapsed..faq > .qa.hidden: When the item is hidden (e.g. during a search)..faq > .qa > h3: The question/title of an item..faq > .qa > h3 > .collapse-icon: The collapse/expand icon..faq > .qa > h3 > .link-icon: The link icon..faq > input.search: The search input element..faq > .search-info: A div where search info is displayed.For the collapse-icon and link-icon, the ::before CSS selector is used
to set the Unicode char for the icon.
Also see the examples.
Yes, you can use <h1>, <h2> and <hr> elements to create a section.
Everything below such element is considered part of the "section divider", until an <h3> is encountered again.
Next to each question is an icon that can be clicked to change the browser url to the question's anchor. This url can be copied and used in links to that specific question.
You can also use https://example.com#faq:a-specific-search to link to the FAQ and directly initiating a search.
(In case the page has multiple FAQ's, use e.g. prefix faq1: to target the right FAQ.)
Linking can be disabled using <div class='faq' data-link='false'>.
Absolutely! This is why we have the option enclose your questions and answers with faq-start and faq-end divs. Because you can use plain HTML in Markdown (although not use markdown inside such HTML), this just works:
<div class='faq-start'></div>
### Question 1
...
### Question 2
...
<div class='faq-end'></div>
Yes, you could; FAQ-div is designed to deal with such scenarios.
FAQ-div is fully functional on all modern browsers (desktop and mobile). It
may not work on older browsers (like Internet explorer). When it does not work,
the FAQ is just <h3>'s and <p>'s, which is a pretty good fallback.
On page load, FAQ-div will select elements with the class "faq" and "faq-start", collect the content of your FAQ, and restructure the DOM accordingly.
In this process, it also builds an index for the search functionality. The search is performed by smart matching of the query against this index. The rest is mostly CSS.
No worries! You can trigger FAQ-div using window.faqdiv.init().
It's safe to call it multiple times.
Add the file faq-div.min.js to your website. Then add the below code
to your functions.php:
add_action( 'wp_enqueue_scripts', 'addFaqDivScript');
function addFaqDivScript() {
if ( is_page('your-page-title-or-id') ) {
wp_enqueue_script('faq-div.min.js', '/path/to/faq-div.min.js');
}
}
The /path/to/faq-div.min.js must be the script's path relative to the
WordPress root directory, or it can be the full URL.
Yes, you can download it, and play with it as long as you like, as long as any deployments are compliant with the GPLv3 license.
The FAQ-div license is obtained as a one-time payment. The license gives you a life-long right to use the current version, plus updates for one year.
Yes, but you'll need to purchase a license.
This depends on the license of the website/product that you use FAQ-div in. If this is (compatible with) GPLv3, then you do not need a commercial license. In any other case, you do.
When you purchase a license you have a right to support via Github. The
business license gives priority support (via Github or almar AT almarklein.org).
No, you can try FAQ-div in advance. Therefore a purchase is final.
No, the VAT differs per country, and Gumroad (our reseller) adds the VAT to the set price.
Yes, you can provide your company VAT number during checkout. The invoice will be updated accordingly.
We make use of Gumroad to handle payments and invoicing. Gumroad supports
creditcard and Paypal.
If this is not an option for you or your company,
contact me at almar AT almarklein.org, so we can arrange for a wire transfer (you
will still get an invoice).