Jump to content

How to make collapsible FAQ?

Gauravk
Gauravk
in General Questions

Featured Replies

Posted

Any ideas on how to make collapsible FAQ with WYSIWYG Editor?

Something like this here: https://www.netflix.com/ae-en/

image.thumb.png.975b2707679ae6bc40e58b4fdd3e08bd.png

 

  • Author

Thanks Pete, this is a popup version and not collapsible. I would have still bought it but I have a problem of people showing front facing copyright on paid apps. Which is pretty useless for developer as IPB is not wordpress or joomla - free to use software. So no one will change community platform and "buy" IPB as they are in love with @TheJackal84 FAQ.

Can anyone help here please for where to add css and js script?

https://wpbeaches.com/create-expandcollapse-faq-accordion-collapse-click/

  • Community Expert

You could use the pages css and js feature to add your custom code to specific pages 

 

 

I would have still bought it but I have a problem of people showing front facing copyright on paid apps. Which is pretty useless for developer as IPB is not wordpress or joomla - free to use software. So no one will change community platform and "buy" IPB as they are in love with @TheJackal84 FAQ.

＋1

@Gauravk

Try this CSS accordin with Pages app in 3 easy steps:

Step-1. Create a block with following code (don't forget to edit the questions and answers): 

<div style="text-align: center;">
<h2>Frequently Asked Questions</h2>
</div>
<section class="faq-container">
  <input id="faq1a" name="faq1" type="radio" checked="checked">
  <label for="faq1a">Which is the best forum software?</label>
  <article>
    <p>Invision Power Suite (IPS) is the best forum software.</p>
  </article>
  <input id="faq1b" name="faq1" type="radio">
  <label for="faq1b">Is IPS forum software cheaper?</label>
  <article>
    <p>Yes, IPS is much cheaper than other paid forum softwares.</p>
  </article>
  <input id="faq1c" name="faq1" type="radio">
  <label for="faq1c">How often does the IPS release updates?</label>
  <article>
    <p>IPS frequently rolls-out maintenance and security updates every month.</p>
  </article>
  <input id="faq1d" name="faq1" type="radio">
  <label for="faq1d">Is it easy to setup IPS forum?</label>
  <article>
    <p>Yes, it is super easy to setup IPS forum.</p>
  </article>
</section>

Step-2. Now paste the following CSS code in the theme's custom.css and save it: 

/* Start FAQ Accordion Section */
.faq-container {
  text-align: left;
  margin: 10px auto 30px auto;
  position: relative;
}
.faq-container article p { margin: 10px 15px 15px 15px; font-size: 14px; }
.faq-container input[type=radio] {
  background-color: transparent;
  border: 1px solid transparent;
  height: 1px;
  position: absolute;
  width: 1px;
  margin: 4px 0 0 0;
  outline: none;
}
.faq-container input[type=radio] + label {
  background: #EEEEEE;
  border-bottom: 1px solid #fff;
  color: #333;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: normal;
  line-height: 32px;
  padding: 10px 15px;
  position: relative;
  z-index: 20;
}
.faq-container input[type=radio] + label:before,
.faq-container input[type=radio] + label:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}
.faq-container input[type=radio] + label:before {
  content: "\f29c";
  padding-right: 10px;
}
.faq-container input[type=radio] + label:after {
  content: "\f054";
  float: right;
  padding-left: 10px;
}
.faq-container input[type=radio] + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label { background: #EEEEEE; }
.faq-container input[type=radio]:focus + label { background: #BEBEBE; }
.faq-container input[type=radio]:checked + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label:after {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
.faq-container input[type=radio] + label + article {
  display: none;
  /* display: none; - Content is ignored by screen readers, additionally stops tabbing through hidden content */
  height: 0;
  max-height: 0;
  overflow: hidden;
  /* 0, 0, hidden; - Content is ignored by screen readers, but tab key still steps through hidden elements */
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.faq-container input[type=radio]:checked + label + article {
  display: block;
  height: auto;
  max-height: 2000px;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
/* End FAQ Accordion Section */

Step-3. Use the widget block (created in Step-1) on any custom Page on the forum.

Done!

 

@Gauravk

Try this CSS accordin with Pages app in 3 easy steps:

Step-1. Create a block with following code (don't forget to edit the questions and answers): 

<div style="text-align: center;">
<h2>Frequently Asked Questions</h2>
</div>
<section class="faq-container">
  <input id="faq1a" name="faq1" type="radio" checked="checked">
  <label for="faq1a">Which is the best forum software?</label>
  <article>
    <p>Invision Power Suite (IPS) is the best forum software.</p>
  </article>
  <input id="faq1b" name="faq1" type="radio">
  <label for="faq1b">Is IPS forum software cheaper?</label>
  <article>
    <p>Yes, IPS is much cheaper than other paid forum softwares.</p>
  </article>
  <input id="faq1c" name="faq1" type="radio">
  <label for="faq1c">How often does the IPS release updates?</label>
  <article>
    <p>IPS frequently rolls-out maintenance and security updates every month.</p>
  </article>
  <input id="faq1d" name="faq1" type="radio">
  <label for="faq1d">Is it easy to setup IPS forum?</label>
  <article>
    <p>Yes, it is super easy to setup IPS forum.</p>
  </article>
</section>

Step-2. Now paste the following CSS code in the theme's custom.css and save it: 

/* Start FAQ Accordion Section */
.faq-container {
  text-align: left;
  margin: 10px auto 30px auto;
  position: relative;
}
.faq-container article p { margin: 10px 15px 15px 15px; font-size: 14px; }
.faq-container input[type=radio] {
  background-color: transparent;
  border: 1px solid transparent;
  height: 1px;
  position: absolute;
  width: 1px;
  margin: 4px 0 0 0;
  outline: none;
}
.faq-container input[type=radio] + label {
  background: #EEEEEE;
  border-bottom: 1px solid #fff;
  color: #333;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: normal;
  line-height: 32px;
  padding: 10px 15px;
  position: relative;
  z-index: 20;
}
.faq-container input[type=radio] + label:before,
.faq-container input[type=radio] + label:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}
.faq-container input[type=radio] + label:before {
  content: "\f29c";
  padding-right: 10px;
}
.faq-container input[type=radio] + label:after {
  content: "\f054";
  float: right;
  padding-left: 10px;
}
.faq-container input[type=radio] + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label { background: #EEEEEE; }
.faq-container input[type=radio]:focus + label { background: #BEBEBE; }
.faq-container input[type=radio]:checked + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label:after {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
.faq-container input[type=radio] + label + article {
  display: none;
  /* display: none; - Content is ignored by screen readers, additionally stops tabbing through hidden content */
  height: 0;
  max-height: 0;
  overflow: hidden;
  /* 0, 0, hidden; - Content is ignored by screen readers, but tab key still steps through hidden elements */
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.faq-container input[type=radio]:checked + label + article {
  display: block;
  height: auto;
  max-height: 2000px;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
/* End FAQ Accordion Section */

Step-3. Use the widget block (created in Step-1) on any custom Page on the forum.

Done!

So cool and easy help, I will try it too

  • Author

Thanks a lot @Lucas James

You are a rock star, this is exactly what I wanted with minimal coding and alteration. Worked perfect from first attempt.

Just a small detailing needed, that I couldn't figure out:

  • How to move question mark in center (slightly down) in line with question text?
  • How to increase the answer text font-size?
  • How to add little margin on top and left of answer text?

image.png.a6ffbfb891d2afd607af7e3ce9bda95e.png

 

@Lucas James any interest into releasing this to our MP?😍

Add multilanguage feature please please

 

@Lucas James any interest into releasing this to our MP?😍

Seriously, I have never tried nor do I know how to make IPS plugin/app since I'm not a plugin/app dev. I wish if someone could walk me through step-by-step process, I will definitely give it a try.

BTW, I'm a Linux SysAdmin (i.e. build/setup/manage servers) and host/setup a number of IPS forums and WP/HTML websites for clients.

-----

@Gauravk

 

Just a small detailing needed, that I couldn't figure out:

  • How to move question mark in center (slightly down) in line with question text?
  • How to increase the answer text font-size?
  • How to add little margin on top and left of answer text?

If you can post the link of the page, I might help. Its all the CSS thing.

 

How to move question mark in center (slightly down) in line with question text?

Reduce the font-size in: 

.faq-container input[type=radio] + label:before,
.faq-container input[type=radio] + label:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

-----

 

How to increase the answer text font-size?

Change the font-size in: 

.faq-container article p { margin: 10px 15px 15px 15px; font-size: 14px; }

or use the !important variable: 

.faq-container article p { margin: 10px 15px 15px 15px; font-size: 14px !important; }

-----

 

How to add little margin on top and left of answer text?

Perhaps, you may use either of these – before the start of the first bullet and at the end of the bullet text: 

<br>
<br />

 

  • Author

Thanks Lucas, everything worked except the answer text size increase. I tried increasing the same code font size earlier too and now tried with important code too but nothing is increasing its size.

 

everything worked except the answer text size increase.

Then tweak the font size from your theme's Text settings. Don't forget to clear forum's and Cloudflare cache etc.

  • Author

I found a workaround, if I just increase the answer text from block editor without the question size change it worked.

If I change all, its breaking the code. So all look nice now, thanks for all your help. 

image.png.914e08ed87bf9e0f366d7022f274d676.png

Great!

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Recently Browsing 0

  • No registered users viewing this page.