How to make collapsible FAQ?

Gauravk · August 29, 2019

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

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

Pete T · August 29, 2019

Gauravk · August 30, 2019

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/

Daniel F · August 30, 2019

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

Gauravk · August 30, 2019

Thanks @Daniel F for wonderful help, I could attach the css and js. Perfect.

Still its not working. Is that because of WP codes are different? I also tried W3school but still not working. Appreciate your help. Thanks in advance.

https://www.w3schools.com/howto/howto_js_accordion.asp

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

kmk · August 30, 2019

4 hours ago, Gauravk said:

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

Lucas James · August 31, 2019

@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!

kmk · August 31, 2019

30 minutes ago, Lucas James said:

@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

Gauravk · August 31, 2019

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?

Daniel F · August 31, 2019

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

kmk · August 31, 2019

3 minutes ago, Daniel F said:

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

Add multilanguage feature please please

Lucas James · August 31, 2019

1 hour ago, Daniel F said:

@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

1 hour ago, Gauravk said:

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.

Gauravk · August 31, 2019

Thanks for your help Lucas

https://carnity.com/faq

Lucas James · August 31, 2019

1 hour ago, Gauravk said:

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;
}

-----

1 hour ago, Gauravk said:

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; }

-----

1 hour ago, Gauravk said:

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

Gauravk · August 31, 2019

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.

Lucas James · August 31, 2019

10 minutes ago, Gauravk said:

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.

Gauravk · August 31, 2019

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.

Lucas James · August 31, 2019

Great!

Invision Community 4: SEO, prepare for v5 and dormant account notifications

Invision Community 5: Beta testing and latest updates

Invision Community 4: A more professional report center

Invision Community 5: A video walkthrough creating a custom theme and homepage

How to make collapsible FAQ?

Recommended Posts

Gauravk

Pete T

Gauravk

Daniel F

Gauravk

kmk

Lucas James

kmk

Gauravk

Daniel F

kmk

Lucas James

Gauravk

Lucas James

Gauravk

Lucas James

Gauravk

Lucas James

Archived

Recently Browsing 0 members

More