How do I expand accordions for printing pages using CSS?

[anyam]

I have a page with a bunch of accordion items that are collapsed by default and I’m developing css styles to print this page. I have a requirement that all accordions be expanded. How do I do this? I can’t seem to figure out how to post code here. so here is a codepen link to one list item that is collapsed by default. https://codepen.io/anyamiretsky/pen/QxaKOQ
The span with the class of ‘caption’ is what is collapsed.

thanks in advance your your help.

[Beverleyh]

The list item is already expanded in the demo by default so there’s nothing there, based on the provided code, for us to suggest.

For us to comment on your actual code, you would have to provide your actual code – all aspects; that is, the JavaScript and CSS that affects/controls the accordion.

Note that we don’t need your whole codebase. We only need the parts related to the accordion.

[anyam]

Sorry, I am new to this. I added the css and what I thought of as the relevant js, although the codepen doesn’t have the accordions expanding properly, so I’m still missing some js. I was working on the @media print query in the css to try to show the relevant text that shows for each plant.

[Beverleyh]

Whoa there! That’s way too much code to expect strangers in a free coding forum to troubleshoot for you. The amount that’s there will put most folks off. That’s not to say that you won’t get the help. It’s just that the likelihood will be significantly reduced.

There’s a much higher chance that someone will offer to help if you provide only the parts that relate to the accordion. Sure, the act of stripping back will take some time, and often it leads to the requestee finding the answer to their own problem, but that’s part of the trade-off; the requestee puts in the time and effort so we don’t have to quite so much. Help us to help you.

Alternatively you might want to consider hiring someone.

[anyam]

Okay, last try before I give up on this… I can’t get the toggle behavior to work in codepen but maybe this is enough code now for someone to give me an idea of what to do?

[Beverleyh]

Try what’s below. Untested, on mobile (seems CodePen is acting up a bit for me at the mo);

.accordion .content {
display:block !important
}

[anyam]

Thank you for your suggestion Beverlyh, unfortunately this doesnt work.

[anyam]

I found the solution! Posting for anyone else that struggles with this:

.accordion .content {
    display: block !important;
    height: auto !important;
}

[Beverleyh]

unfortunately this doesnt work.

The issue is that you didn’t supply all the pertinent code upfront because my code works fine for the demo.
height is auto by default so there must be a definitive lesser/null value elsewhere in your code that is restricting it.

If you need help in future, please remember to post all of the related CSS, otherwise, with all the best will in the world, our recommendations won’t effectively or sufficiently help you.

[Author]

Posts