CSS Media Queries - hidden elements

I’ve recently “completed” the Colmar Academy project at the end of the Build a Website with HTML, CSS, & Github Pages (quotations around completed because I feel it can be much better).

I have resized a section using media queries to hide the picture and content under certain headings. I would like those headings to have a dropdown of some sort that will open up the content that is currently hidden. Googling suggestions on how to do this has been unsuccessful.

Any ideas? Thanks!

Whether this will be what you want, or not, it is worth considering…

<details>: The Details disclosure element - HTML: HyperText Markup Language | MDN

1 Like

Something like this will work! Greatly appreciated!

@mtf - this worked nicely.

Assuming your experienced with details, is there a way I can change default open to default closed within media queries when my screen size is smaller?

TBH, I’ve not had any real level of experience with DETAILS and can only suggest creating selector rules that can be easily overridden.

1 Like