Accordion with css only, no javascript.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

ACCORDION 🔴 :

• The best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements).

• They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the div, label & input elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.

• MDN's reference is a great place to start learning about the details and summary elements if you are interested.

• If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hey there! Congratulations on completing your project.

One way you could remove the overflow: hidden from the parent <div> is by creating a separate direct parent <div> specifically to contain the element that needs its overflow hidden.

in the HTML:

<div class="parent">
<div class="child">
<img src="img.jpg" alt="child-image">
</div>
</div>

in the CSS:

.parent{
position: relative;  /* position may not be necessary */
overflow: hidden;
}

.child{
position: absolute;/* position may not be necessary */
}

By creating this nested structure, you can apply the overflow: hidden specifically to the desired container, allowing more flexibility for other elements within the parent <div>.

You could also consider the tradeoffs of using overflow: hidden; to hide overflow on X and Y axis vs overflow-x: hidden; and overflow-y: hidden;

Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!

I had a similar problem with this task. I used position: absolute, and it brought the element to the top. Like you, I have a feeling that it could have been done better.