Accordion Layout

This support ticket is created 6 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 4.41 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 6 years, 8 months ago.

Assisted by: Nigel.

Author

Posts

March 22, 2018 at 11:06 pm #627581

StephenD4019

I need the accordion title bars to have just a small padding above and below the writing. Also, all the accordions whether they are expanded or collapsed need to be only slightly wider than the maximum content. They all need to be the same width. They don't look correct taking up the whole width to the sidebar.

March 23, 2018 at 1:21 pm #627743

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Stephen

I visited your site but I couldn't see where this appears to check the styles being applied.

The first part is basic CSS, modifying the padding around the title elements. You should visit the page in question where this is displayed, right click on one of the accordion titles, and inspect it in the browser console. There you will be able to see the styles applied to the titles and the CSS selectors they come from, and you can add custom style rules using the same selectors to override the padding.

The second part, that all of the accordion panels should have the same width as the content of the widest panel isn't possible without writing custom CSS using flexbox for your accordions or custom JavaScript to change the width of the container div of the accordions (which, if you are using Bootstrap accordions has a class of panel-group) after calculating the width of the widest panel.

The first method is preferable as it is CSS-based and doesn't depend on using JavaScript to manipulate the page after it has already been rendered, but effectively involves rolling your own accordion solution.