Question and click for answer - Post...

User 2796102 Photo


Registered User
35 posts

I want to make a feature on my website where it lists Frequently Asked Question and then at the end of the question you can click a button or down arrow and the answer appears beneath the question and if the click the button again the answer disappears. I've seen this before but don't know what to call it or how to set it up? Any help would be appreciated.

Phillip
User 122279 Photo


Senior Advisor
13,696 posts
Online Now

You can do that with 'accordions'. There should be components for that built into SD, at least for Bootstrap and Foundation. Or you can check my site, mock-up.coffeecup.com where I have examples for 5 different systems.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2796102 Photo


Registered User
35 posts

Thank you Inger. My site is Vanilla. I copied your component but it doesn't work when I preview the page. Where do I need to stylize it to make it functional?
User 122279 Photo


Senior Advisor
13,696 posts
Online Now

It should actually work right 'out of the box'. I have built it mobile-up, but I don't think that will stop it from working if you have built your site desktop-down. It has only one breakpoint, and I actually think it was put there in error. I deleted it from my sample and it didn't make any difference.

From what I have sometimes seen here, some people have problems with the spelling of the word 'accordion'. It is important to get it correct because the word is being used by the wee js that is sitting in the HTML element included.

If you post your project file, I may take a look and probably find out why it is not working. It is past midnight where I am, so if you post it, or pop it in your dropbox or similar, I will find it in the morning. Or someone else will pop in and help.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
13,696 posts
Online Now

One more thing you ought to check: When you imported the accordion component, did you get any warnings about some class names having been used already? In such cases, the new thingie that gets imported will have their class names appended by '-1' Make sure something like that didn't happen to the class name 'accordion', for the reasons I mentioned in my previous post.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,656 posts
Online Now

Because Ingers Component is made for MOBILE FIRST and your project is DESKTOP DOWN then it doesn't work above the breakpoint maxwidth=71.5 rem even if there has been no appendage to classes/id's

no matter what you may try

depending on how confident you are at coding for CSS and JS it would be quicker and much easier to follow the instructions about making an accordion component.
https://www.w3schools.com/howto/howto_js_accordion.asp

first, you insert a container, to which you declare the width and the maximum width (up to you)
then in that container, you insert an HTML element
you place the HTML code into the header of the HTML element
edit text and panel content accordingly
you place the CSS into the CSS section of the HTML element, edit, and style accordingly

You place the JS code into the FOOTER section of the HTML element
this shouldn't need any changes unless you change the class names

there is also a pretty good HOW TO video on youtube which you can follow

https://www.youtube.com/watch?v=MXrtXg1kpVs


its not for SD frameworkless but it uses HTML & CSS

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,656 posts
Online Now

I may have found a solution

1/ select a new project "MOBILE FIRST"

2/ insert Ingers component

2/ delete the breakpoint

3/ move over to the "Content" Tab, down to the components bit & delete the component and delete it from the resources library

4/select the container with the class
"accordion-wrapper"

5/back to the "content" components" section and click the "create component from selection" button

6/give it a name

7/hit the icon that adds it to the library

8/ save (optional) and close project

9/ open you DESKTOP down project

10/delete the old component from the page and the "Content" "components"section

11/ staying in that components section click to "Add component from library" button and then add it to the page

12/ You can now give the container "accordion-wrapper" a width / style colour as required

you can style all other elements within the accordion as you desire no need to touch any css




The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,656 posts
Online Now

I can do a How To demo video for you to follow along with if you prefer

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,696 posts
Online Now

Actually, I have an accordion built desktop down, I had just forgotten about it. It can be seen on my first sharing site, the first URL in my signature. Since we were not able to create components ourselves at that time, I had to post them as zipped project files. Now I went in and picked it out, and made it into a component. If you want to use it, you have to edit out the contents I have added to the different panels. Any tweaking or editing, or appending to class names that I have mentioned already, or which is mentioned on the accordion page in the 'shop', apply to this one too.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.