Accordion with css only, no javascript.

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  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!

  1

  ---

  

  Sidney François•110

  @sidneyfrancoisPosted over 1 year ago

  @0xAbdulKhalid Thanks for the suggestion! I'll check this out and make the necessary changes in my code.

  0

  

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  @sidneyfrancois Glad you found it helpful ! 🤠

  0
• 

  Chanda•800

  @Chanda-AbdulPosted over 1 year ago

  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!

  1

  ---

  

  Sidney François•110

  @sidneyfrancoisPosted over 1 year ago

  @Chanda-Abdul thanks! I'll try to implement this into my solution, gold info.

  0
• 

  Qumrran•410

  @qumrranPosted over 1 year ago

  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.

  0

  ---

  

  Sidney François•110

  @sidneyfrancoisPosted over 1 year ago

  @qumrran Yeah... I mean, I could use the fixed property to solve the problem but that wouldn't be an ideal solution in a real world situation.

  0