Hello Peter

I have made an example here : http://www.energifremtiden.dk/c4d/accordion-3---copy.html

And another here : http://www.brammingegnsmuseum.dk/info.html

Try to hover the maps to the left, and the icons on the accordion to the right.

I have the accordion here : http://www.energifremtiden.dk/c4d/accordion---2.html

Is this a kind of what you mean ?

If - then I can support you with the code for one of the accordions in the last example.

Kind regards

John S.

Hello John,

This is exactly what i am looking at.

However, i wondered if it could be created within X5 or how the showbox type object worked in their template.

I was really trying to keep away from the HTML options.

Your example looks great, and the links on map to the menu is very good.

Thanks

Peter

Hello Peter

Here is some code for the accordion. The code should be put in a html-object. The first part in the HTML-code tab and the styling in the expert tab - so - you could say it is created within X5.

This code in HTML code :

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

<div class="half">
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Trained guards</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">Response management</label>
<div class="tab-content">
<p>Lorem ipsum doipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed dog elit, sed do eised do eiit, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="http://www.john-schwartz.dk/files/test15.jpg" align="left" style="width:150px;height:100px;">
<p>Lorem ipsum dolor solore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="http://www.john-schwartz.dk/files/test15.jpg" align="right" style="width:150px;height:100px;">
<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>
<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>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">CCTV Monitoring</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>
</div>
<script>
function myFunction() {
document.getElementById("tab-one").click();
}
</script>
<script>
function myFunction2() {
document.getElementById("tab-two").click();
}
</script>
<script>
function myFunction3() {
document.getElementById("tab-three").click();
}
</script>

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

This code in the Expert tab

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

body {
color: #2c3e50;
background: #FFFFFF;
}
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: #aa98db;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height:20em;
}
/* 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);
}

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

Hope you have it to function.

If you want more information to my examples, then please contact me via the contact form on calendarforum.dk

You find it here : http://www.calendarforum.dk/contact.html

Hope you were helped by this.

Kind regards

John S.

Hello Jonh S,

Many thanks for sharing this.

I will give it a try and see how it goes.

Regards