Hi,
I want to set up an accordion (I think although very happy to look at other elements if better!).
I want to set up a list of council members where you can always see a picture on the left, and to the right the name and role but then with a dropdown to give a short bio. I’ve attached a pic to show what I mean…
Many thanks in advance for your help.
Hi @pollenbird,
Thanks for reaching out.
Unfortunately, this is not currently possible with the existing accordion. It seems that it requires multiple layout and structure and not just the accordion. For that, it would require customization that we can’t provide here in the forum. It could be custom element since we don’t recommend customizing the existing elements such as the accordion. You can check this and forward to your developer that may able to help with the customization.
Cheers!
That\s a shame but thank you anyway. Is there any existing element I might be able to use to obtain a similar effect do you think?
Hi @pollenbird,
You can try the Content Area Modal element, you can customize its toggle like on the screenshot below, It has a primary text, secondary text, and image option, even secondary image option for a hover effect. If you do not see these options on your end, please enable the Advance Mode.
And then the full details/bio on the modal when you click it.
Cheers!
Thank you - I’ll take a look!
Hello,
Just playing around with this and I think I’m being dim but how do you make the image square? And how do you lay out the text next to the image please? At the moment, my text is within the circle.
Many thanks 
Hi @pollenbird,
That circle effect is caused by two things, the Border Radius and Box Shadow, please zero out these options to remove that circle effect.
If you do not see these options on your end, please enable the Advance Mode.
Hope it helps,
Cheers!
Thank you! Is it possible to add an extra line of text at all please? And how can I edit the size of the image (for the toggle) please?
Thanks for your help 
Hi @pollenbird,
We’re starting to push the limit of what the element was designed for, as it’s simply a button that allows text an image, but there are ways to stretch this further for your needs.
You can add more lines by adding line break tags in the secondary text. This for example will display in two lines:
Line2<br/>Line3
Although it could get a bit scrunched as the default line height isn’t meant for multiple lines. You can space things out about by adding some Element CSS (found on the Customize tab when inspecting an element)
$el.x-anchor .x-anchor-text-secondary {
line-height: 1.5;
}
There’s no limit to the size of the image. It will honor the natural dimensions of the image, but you can enforce a maximum width. I would recommend doing this:
none) and set it to half the width of your image - 200px in our example.Doing this will help you keep consistent looking images that are retina ready and look nice on all device sizes.
Brilliant, worked perfectly, thank you so much
Just one more question: when looked at on mobile preview, the dropdown box is obscured by the items below (set up in a separate column). I’ve attached a screenshot. Is there a way to layer them up so the dropdown overlays the underlying objects?
Thanks guys - your help is so much appreciated!
Hi @pollenbird,
That is a 2/3 and 1/3 column right? Please inspect the 2/3 column (where the Content Area Modal are placed)
Then set its z-index option to 2, that way it will be higher than the z-index of 1/3 column (which is 1 by default)
More details about z-index CSS property.
Hope it helps,
Cheers!
Brilliant, thank you!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
