Accordion card using just CSS

Community feedback

• 

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  Hi Jhemili,

  Your solution looks great, just two things:

  • I would add an option to close the question you just opened because once you open a question you can no longer have all the questions closed, there will always be one open.

  • Work a bit more on the frontend to make it look more like the designs they give you: the spacing looks a bit off it should be consistant, the card's width on tablets looks a bit large.

  Keep on the good work!

  Cheers!

  Marked as helpful

  0

  ---

  

  Jhemili Santos•55

  @JhemiliPosted over 3 years ago

  @B1N4R1 I've thought about the closing option, but I couldn't find a solution using just css. Dou you have any ideia how this could be done? Thanks a lot.

  0

  

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  @Jhemili You could convert your <div class="container"> to <a href="#" class="container"> then in the css you reset the anchor tags default styles like:

  a{
     color: inherit;
     text-decoration: none;
  }
  

  So every time you click at the card the questions will close because the url of the site will change from #questionN to #, same will happen if you click on the opened question because the questions are children of the card so you are actually clicking the card too

  Edit: This can vary, you could put the anchor tag as the wrapper of all the layout and instead of using the body to center everything use the achor tag

  Cheers!

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  @B1N4R1 this is not a reason to use an anchor tag

  0

  

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  @ChamuMutezva You are absolutely right, I was just suggesting a way to do it just using CSS and this is a little "trick" or "hack" you can use. If it was me I would have used JS like I did in my solution to this challenge

  Maybe there is another way to do it with CSS that I missed?

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  @B1N4R1 , an easy way will be to use the details - summary element.

  1

  

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  @ChamuMutezva You just revealed the world to me, didn't know about this element. You can do so much with it! Thanks!

  0

  

  Jhemili Santos•55

  @JhemiliPosted over 3 years ago

  @ChamuMutezva Thanks a lot for the help. I just posted the second version. I fixed some layout problems, and used your suggestion about details and summary. The code is now more organized and responsive, hope you guys agree.

  0