FAQ module

Beaver Builder
1

Hi. I’m using the BB FAQ module but I want it to look and work like this one http://www.momandpopcorn.com/faq/

How can I achieve that?

2

Hey Kassim,

Have you tried using the Accordion Module? I’ve tried to create one with it and it looks quite similar. I’ve attached the screenshot for you too. Let us know how it goes.

http://imgur.com/k1gMMrN

Thanks!

KC

3

I’m currently using this module, but it doesn’t look like the example I showed. I want it to look and work like the example I showed.

4

Hi Kassim,

You are going to have to do some CSS work to achieve that look :slight_smile:

  1. For the Plus icon on the left, enter this into each Item Label:

<i class=“fa fa-plus”></i>

  • so the first label would be:

<i class=“fa fa-plus”></i> Where can I buy your yummy popcorn?

  1. Not sure what theme you are using or where you enter custom CSS, but here is what will do it:

Note: you will have to give the Accordion Module an ID (in the Advanced tab) - in this example, I used faq1

#faq1 {
font-size: 110%;
line-height: 130%;
color: #999;
padding: 20px 15px;
display: block;
}

.fl-accordion-button-icon {
display: none !important;
}

.fl-accordion-item {
border-top: 1px solid #DDD !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
margin-bottom: 10px;
}

You may need to tweak the padding and margin values as well as the colors, but it is pretty darned close to your example :slight_smile:

Cheers and Merry Christmas!
Lyle

5

Thanks Lyle. This worked great. The only thing is that I’m trying to figure out what needs to be modified so that the question sits directly in the middle of the two lines. It appears at the very top now. Also how to configure it so the question highlights when clicked and turns the plus into a minus sign. I’m using Dynamik Website Builder.

6

Hey Kassim,

I’d just like to chime in here. What part of our Accordion module do you not like? I checked the page you linked above and compared it to our Accordion module and they both look 80% similar, at least for me. Try checking the links below and see if it helps. These are threads/articles discussing how to add some style to the Accordion module. :slight_smile:
http://forum.wpbeaverbuilder.com/support/q/adding-fill-to-accordion-heading/
http://forum.wpbeaverbuilder.com/support/q/adding-fill-to-active-accordion-heading/
http://forum.wpbeaverbuilder.com/knowledge-base/change-accordion-icon-to-image/

Ben

7

Thanks Ben. I found some use for the second link, but I noticed in the third link, it makes reference to changing the + and - icons to an image. I don’t want an image. I just want the icons to change when the accordion is open.

Actually on my accordion, the plus icon doesn’t even change to a minus sign when open, which is one of the things I wanted. So is this accordion module not behaving properly?

Also how do I get the question to sit in the center of the line above and below it, as in my previous example here http://www.momandpopcorn.com/faq/

8

Hey Kassim,

That’s weird! It should change to a minus sign when opened. Do you mind sharing the URL of the site in question so we may take a look? I can also check your other once we get to visit the site. :slight_smile:

Ben

9

I used the code from Lyle above and also the code from the second link above that you gave me. This is what I have …

}#faq1 {
font-size: 110%;
line-height: 130%;
color: #999;
padding: 50px 15px;
display: block;
}

.fl-accordion-button-icon {
display: none !important;
}

.fl-accordion-item {
border-top: 1px solid #DDD !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
margin-bottom: 10px;
}/*

Change Accordions Title Color when open
*/
.fl-accordion .fl-accordion-item.fl-accordion-item-active .fl-accordion-button .fl-accordion-button-label {
color:#c82506;
}

/*
Change Accordions Content Color when open
*/
.fl-accordion .fl-accordion-item.fl-accordion-item-active .fl-accordion-content p {
color:#000000;

  1. This removed the boxes from around the questions and answers and just puts a line above and below each time like I wanted.

  2. It moved the plus icon on the left hand side of the question like I wanted, but now the minus won’t display when the item is open. I need that back.

  3. It highlights the question in red when open and the answer is in black text. I also like this.

The only thing that’s missing I’m guessing from the code above is a way to add that minus icon back in, for when the item is open, and also the margin fix so that each item sits perfectly center between the two lines.

10

Do you mind sharing the URL of the site you’re working on so we can take a look?

Ben

11

Can’t share yet. Is it not possible to look at above code and tell why the minus isn’t showing up when item is open and fix the margin issue?

12

Hey Kassim,

I see now, the reason why the plus icon doesn’t change is because you’re adding it as part of the heading. I think what you’re trying to do can be done with custom CSS but I can’t be sure unless I can see the site.

Ben

13

I don’t understand. Are you not able to test this code on your end with an accordion module? The code I received from Lyle was given without seeing the site. The code works. I’m just looking for where small tweaks needs to be made for a minus sign to appear while the item is active and adjust a margin. The site can’t be shared right now.

14

Hey Kassim,

The main reason I asked for the site URL was so I can see the modifications that are currently there. Can you try the styling below and see if it’s what you’re looking for? You’ll have to remove all previous styling you have in place though. :slight_smile:

/* Transfer BB Accordion plus symbol to the left side */
.fl-module-accordion .fl-accordion-button {
  position: relative;
  width: 100%;
}
.fl-module-accordion .fl-accordion-button-label {
  padding-left: 20px;
}
.fl-module-accordion .fl-accordion-button-icon {
  position: absolute;
  left: 0px;
}

Ben

15

Hi Ben. This moved the plus icon to the left but made it smaller and now it doesn’t sit inline with the question. It sits a little above to the left. It also brought back the box around the question. It did bring back the minus on active item though.

The code I already had, which I listed above worked perfectly, except for two things … the minus icon being removed and the margin, because the question wasn’t sitting in the center of the line above and below. I just need something to work with what I already have or some new code that puts all of these things together:

  1. icon on left instead of right
  2. Question and icon change color on open
  3. Questions sit in between lines instead of boxes
16

Hey Kassim,

This is the reason why I wanted to see your site. :slight_smile: The code I gave you above works fine on my local dev, the plus/minus icon sits perfectly inline the question, but it doesn’t on your end. I can add the code for points 2 and 3 but I won’t be able to fix the positioning issue you have on your icon unless I can see the site.

We can’t make the code you had earlier work, since you’re adding the plus icon manually with the heading - it’s already part of the content so we can’t change that via CSS.

Hope this makes sense. :slight_smile:

Ben