That's what all the folks need!

Code? How to get it?

I don't know how. I can see people have their nice projects shown and posted to download. But these are their accomplishments of nice graphics and effects. The one I created is just plain page with some HTML, CSS and jQuery code implemented. I could make it public, but don't know how...

Here are the snapshots again:

Hello Thomas ( and others interested in a text-accordeon )

See this post : https://helpcenter.websitex5.com/en/post/177023

In the post is a link to the source of two different accordeons - one that opens multiple and one that close the accordeon when a new is opened.

And there is also links to some demos I have made based on the accordeons.

The accordeons is made with pure HTML and CSS

Kind regards

John S.

The accordeon is very easy to implement. And easy to style also. ( when you once know how )

All the code can be put in a html-object, and then you have an accordeon that can be used to make a FAQ object.

It is rather easy to add more lines to the accordeon.

And if you are experienced with html, it is also rather easy to add images and so, to the accordeon as in the example I have given here : http://www.energifremtiden.dk/c4d/accordion-3---copy.html

I dont know if it is this " nice graphics and effects " Thomas is referring to, but the plain code and WITHOUT Jquery

can be grabbed here : https://codepen.io/raubaca/pen/PZzpVe

This is a good base for a clean and "easy-to-handle" text-accordeon.

AND you can choose between the open-multiple and the open-one

Kind regards

John S.

Here is the code for the two accordeons.

The styling could be put in the expert-tab, but the code shown here, is just to clip and then paste into a html-object.

The accordeon that is not to be used can be deleted.

Here comes the code :

-------------------------------------------------------

<style>
body {
color: #2c3e50;
background: #ecf0f1;
}
h1 {
text-align: center;
}
.half {
float: left;
width: 90%;
padding: 0 1em;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16a085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
.blue label {
background: #2980b9;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #1abc9c;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.blue .tab-content {
background: #3498db;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "¤";
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}


</style>

<h1>En lille test</h1>


<div class="half">
<p>Open <strong>multiple</strong></p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>

<div class="half">
<p>Open <strong>one</strong></p>
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab blue">
<input id="tab-five" type="radio" name="tabs2">
<label for="tab-five">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab blue">
<input id="tab-six" type="radio" name="tabs2">
<label for="tab-six">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
document.getElementById("tab-two").click();
}
</script>

Thank you, John, for links to the sample accordion menus and for the code. These examples are nice menus, but I don't think they are best for the Frequently Asked Questions (FAQ).

In order to make my project different from the other accordion samples, I added some functionality to it. Because number and kind of questions may change - the HTML code would have to be edited for every change. I created a text file and put all information there. The HTML code is generated from this text file. No code changes necessary - all is done by one small Java script. Some users may like this kind of approach.

The page looks like this:

and the text file (may look complicated, but really it's not):

As you can see, tags like <b>, <i> or <u> can be added in the text - as in question #4.

The HTML code is as simple as this:

I hope you like it.

Hello Thomas

I just posted the code because it is very easy for users to copy the code into a html-object and then they have an accordeon.

My version is maybe not sophisticated, but the beauty of it is, that it is made with purely HTML and CSS.

The best would be that INCOMEDIA made an object for a text accordeon. It should be rather easy for them to make an object where you ( as for slideshow and other objects ) had a number of lines you could insert. Each line should be an item in the accordeon. And then some styling ( color, headline height and font size/color ).

My first post about the accordeon is quite old. INCOMEDIA ( Elisa ) announced that INCOMEDIA had made an accordeon - there was something they totally have misunderstood OR they were so eager to show that they listen to us users - what they had made was the image-accordeon that has NOTHING to do with the text accordeon.

I personally have no need for the accordeon now. I think it is rather easy to make an accordeon by pasting the code into a html-object and then style it as needed. AND I can have images and other stuff with hovering and clicking effects.

If INCOMEDIA wait too long with this, then people will have made their own accordeons and will have no need for the object.

Kind regards

John S.

John,

I recently came across your four possible kinds of Incomedia responses. The support person you mentioned above responded to several my posts – all of them I would qualify as #1 from your options.

(they cannot help and will not support user’s code because it may interfere with the software – clearly #1)

Most of them were answers to posts regarding adding my own code to the page created in WebSite X5 v.14 and 15. The answers were always the same – Incomedia cannot be of any help. The only help I received was from Incomedia’s Stefano (seems to be very active and knowledgeable guy) and regular users.

Being a programmer all my life (now retired) I couldn’t resist writing scripts which would reside outside the software and allowing just minimal HTML and CSS code within the page. The “Accordion FAQs” is perfect example.

You are right – Accordion Menu is pretty simple to implement, but I don’t predict it being added as an option to the software any time soon. And certainly not for free…

Thank you for your input!