Faq 
Author: Rajiv S.
Visited 1759,
Followers 1,
Shared 0
How can I add a FAQ (Frequently Asked Questions Section) in Webpage (you click on a question to display answer as in pc attached
Posted on the
There are 2 possibilities:
1) With the additional object "Accordion Text/FAQ" for WebSite X5
>> https://market.websitex5.com/de/objekte/526c4939-3abc-41c3-b34a-37baa6a14af
2) Manually as HTML and CSS code in an HTML object.
>> https://www.w3schools.com/howto/howto_js_accordion.asp
Rajiv, there is also the free Accordian Text which may do the job if you don't require anything fancy.
Author
There is no free Accordion Text (or Accordion Gallery) (all the cool objects, some of which should be part of regular package (especially such as galleries and accordian text because they are required much and make life of simple website builders easy are in paid zone :( )
I would also be interested to know where the free accordion object is available. It's not included in the Evo version, nor in the free add-on items.
Since I have basic knowledge of HTML, I can easily create this myself in the form of copied HTML, CSS and Javascript code and paste it into an HTML object.
There are many accordion text websites on Google, but the website I linked above is the one that does it the easiest with complete code examples for beginners.
Whilst we await Incomedia, is it available in object management?
It is available in my object management (pro), but I now note the freeby is not available through marketplace on the web. It is possible it has been withdrawn and remains on my installations as a legacy object, and I guess it is also possible it is only included in pro. Sorry if I have mislead you.
Incomedia, can you advise??
I just looked for Accordion objects(s) in my pro, and I don’t see any free versions either.
I hope that this is useful.
Good morning
I pass you a drop-down that I made to design a series of tables being able to modify the graphic characteristics. the one that shows is in HTLM but there are other ways. Paste the following code into an HTLM object.
To modify, just look at the code headers and look for the contents of each section.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
transition: 0.4s;
border-radius: 5px;
margin-bottom: 5px;
}
.active, .accordion:hover {
background-color: #3C78D8;
color: white;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
color: white;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<button class="accordion">Estado saturado</button>
<div class="panel">
<p> </p>
</div>
<button class="accordion">Volumen másico estado sobrecalentamiento</button>
<div class="panel">
<p> </p>
</div>
<button class="accordion"> Entalpía estado sobrecalentamiento</button>
<div class="panel">
<p> </p>
</div>
<button class="accordion">Entropía estado sobrecalentamiento</button>
<div class="panel">
<p> </p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
Author
Thanks to everyone. Just a request to X5 to add at least one cool gallery and object in each category (not just the basic ones0 as part of standard package as most of X5 users are usually drag and drop users
Here: http://eksempelsite.dk/accordions.html is some examples of accordeons.
I think one of them is the same already shown.
INCOMEDIA made 2 accordeons one free and one to pay for. They have now "removed" the free version - I guess it was because it was free. But accordeons is rather easy to make and the ones you make yourself can be given much functionality.
BUT I think there should be a free version as an accordeon is often used on websites.
One could think that we will end up with a product (X5) that is only a shell, and if you want functionality you have to buy that extra.
I made this post https://helpcenter.websitex5.com/en/post/177023 where I suggested the accordeon.
And: Surprise, surprise - it was made - https://helpcenter.websitex5.com/en/post/197999
And now it has gone again - unless you make it yourself or pay for it
Hi there,
I confirm this effect can be set up with the Accordion Text / FAQ Object, which cost 16 Credits and is available for both Evo and Pro starting from version 2020.2
Please let me know if I can be of any further help. Kind regards.
Sadly this is very disappointing to me Elisa.
German text - for other languages you need Google to translate or a browser addon.
----------------------------------
Ist ja kein Beinbruch, einfach von dieser Webseite ...
>> https://www.w3schools.com/howto/howto_js_accordion.asp
... das letzte Beispiel mit dem Button [ Try it Yourself >>] öffnen und die 3 Abschnitte ...
<style> ... bis ... </style>
<h2>Accordion with symbols</h2> ... bis zum letzten ... </div>
<script> ... bis ... </script>
... kopieren und untereinander ins HTML-Objekt einfügen, dann bei 2. Abschnitt die im Beispiel schwarzen Texte durch eigene Texte ersetzen.
Zur Vervielfältigung der Aufklappabschnitte einfach diesen Teil ...
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
... kopieren und untereinander einfügen.
HTML (inkl. CSS und Javascript) ist einfach, wenn man fertigen Code nur kopieren, einfügen und bei Bedarf etwas abändern muss.
Tipp: Wenn es langsamer auf- und zuklappen soll, dann im 1. Abschnitt bei diese Angaben ...
transition: 0.4s;
transition: max-height 0.2s ease-out;
... die Zeit in Sekunden etwas erhöhen, z.B. auf 0.8s - und vielleicht liefert Incomedia ja doch noch ein einfaches kostenloses Accordion-FAQ-Objekt.