Accordion Button Display Automatic Sizing

  • Unknown's avatar
    komakulshan · Member ·

    When the accordion buttons below the calendar at: https://mountbakerclubsite.wordpress.com/calendar/ are pressed, the buttons don’t expand large enough to show all of the tagged items. Is there some CSS code to display the active button to automatically resize to fit the number if tagged items? I’m a volunteer for the site with just enough CSS knowledge to be dangerous. Style sheets shall be the death of me. ;)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    You can make the second section expand to a larger size with code like this:

    article.accordion #acc2:target {
	height: 23em;
}

    You might also want to change some of the hover colours as it’s a bit distracting having the entire background change colour when you move the mouse around, especially as the transition time is quite long.

  • Unknown's avatar
    komakulshan · Member ·

    Thanks, but is there any code that resizes the button to automatically resize to the contents of the expanded button? I’d rather not have to manually resize them because the items in the buttons will be changing often (I’m lazy).

    Thanks for the suggestion on the button visuals. I’ll play with them a bit.

    Thanks again!

  • Unknown's avatar
    hallluke · Member ·

    I tried switching the height in your existing code from 15em to 100% and that kind of works but then the accordion behaves a bit erratically. Try it out and see how it works for you, other than that my suggestion would be to set the default height large enough to fit your largest list so you don’t have to worry about bits being hidden.

  • Unknown's avatar
    komakulshan · Member ·

    Thanks!

  • The topic ‘Accordion Button Display Automatic Sizing’ is closed to new replies.