Make the expand section more obvious

[nnja]

From the interface it's pretty non-obvious that the expand section can actually be... expanded.

I added the following changes:

• Add a mouse over to the title that's the same color as other links
• Make the icons bigger, use a double chevron
• Make the title bold
• Indent the content slightly after it's expanded

Before (gif)

After (gif)

[matalo33]

Thank you, I think this is a positive improvement. I think before merging it would be nice to enhance it a little further...

• Text and button should be vertically centred. At the moment the text is lower as it aligns to the bottom of the div
• Expand and no-expand buttons should be same horizontal width. When toggled the horizontal width reduces so the text heading shifts left. Can these be made to be the same width?

[NicTanghe]

THe alignment of the arrows and text is verry weird.

i think a grey box -> (with the possibillity to change the colour) and a little arrow on the bot right would be better.

[McShelby]

• I am not a fan of double chevrons. In other places single chevrons are used (prev, next and in some installations the sidebar menu expander). So for a coherent look I'ld prefer single chevrons.
• I agree in changing the color to the same color that is used for links in general. This makes it obvious for the user, that this area is clickable.
• I don't understand why the font needs to be strong. I think color is enough. Maybe it's an option to underline the text on MouseOver as with other links.
• Also I have an idea why the icon is larger, I don't like it very much. It looks clumsy in its current form (this may be due to strange alignment with the text)

[JianLoong]

I actually agree with @McShelby with regards to the usage of the single chevron instead of double.

A simple and old example of something old but nice would be jQueryUI accordion element. Link here