Press "Enter" to skip to content

A Basic, no-frills FAQ Accordion Built With jQuery

Ask is a basic, no-frills FAQ built with jquery. The question is the basic FAQ, no-frills. This is a small jQuery plugin that helps you create a basic FAQ accordion using the Description menu item: <dl />, <dt />, <dd />.

Collapsible Panel / Accordion Component Using Vue3

How to make use of it:

1. Add questions and answers to the FAQ accordion.

<dl class="questions">
  <dt>Question 1</dt>
  <dd>Answer 1</dd>
  <dt>Question 2</dt>
  <dd>Answer 2</dd>
  <dt>Question 3</dt>
  <dd>Answer 3</dd>
  ...
</dl>

2. Add the Ask.js JavaScript library to the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/ask.js"></script>

3. The instance CSS to style your FAQ accordion.

dl.questions {
  background: #DCE3E5;
}

dl.questions dt {
  background: #E8ECEE url('plus.svg') right center no-repeat;
  background-size: 22px;
  background-origin: content-box;
  cursor: pointer;
  padding: 15px;
  border-bottom: 1px solid #DCE3E5;
}

dl.questions dd {
  padding: 15px;
  background: #DCE3E5;
}

dl.questions .expanded_img {
  background: #E8ECEE url('minus.svg') right center no-repeat;
  background-size: 15px;
  background-origin: content-box;
  cursor: pointer;
}

4. You may create a customized toggle component that can be utilized to indicate/cover all questions with a single click.

<input class="open" type="button" value="Toggle All">

Minimal Accordion Component-Based On Description List, Ask Plugin/Github


See Demo And Download

Official Website(jvkrakowski): Click Here

This superior jQuery/javascript plugin is developed by jvkrakowski. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *