FAQ Accordion Card

Community feedback

• 

  Adarsh•1,640

  @adram3l3chPosted over 2 years ago

  HI Catherine congratulations for finishing the challenge, you did a great job. I recommend the details tag for creating these kind of accordions. It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.

  You can refer about the details tag here

  1

  ---

  

  Julian Florez•190

  @juliflorezgPosted over 2 years ago

  @adram3l3ch while this can be done with plain HTML + CSS as you say, the main purpose of this challenge is to create the accordion behavior with JS and DOM manipulation.

  0

  

  Adarsh•1,640

  @adram3l3chPosted over 2 years ago

  @juliflorezg Go to the challenge info and read the bonus tip :)

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @adram3l3ch I will take a look, thanks

  0
• 

  Alazar Getachew•260

  @AlazarG19Posted over 2 years ago

  nice solution it just need some slight adjustment like the shadow

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @AlazarG19 Thanks for the feedback

  0
• 

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  Hi @catherineisonline, 👋

  Nice job! 🎉

  What helped me with the image positioning was using containing elements with background images. Here is an html example of my containing elements:

  <div class="card">
      <div class="card__image"> 
          <div class="card__image-main"></div>
          <div class="card__image-main-shadow"></div>
          <div class="card__image-box"></div>
      </div>
  
      <div class="accordion-container-here"></div>
  </div>
  

  Feel free to look at my solution to see more. I spent so much time on it to get it as close to the design as I could. 🤯

  You might also want to put a transition on your accordion. I did that as well.

  I hope this is helpful. 😊

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @DarrickFauvel I will give it a try, thank you

  0
• 

  Kasra Tabrizi•300

  @KasraTabriziPosted over 2 years ago

  I was also having issues positioning the images in desktop mode, so you are not the only one lol. Especially with the small box and the pattern image.

  But it looks good otherwise!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @KasraTabrizi I will take a look, thanks!

  0
• 

  Hamza Abdirashid•100

  @hamzaabdePosted over 2 years ago

  Again nice job.

  You might consider using the summary and details tags for less overhead. Also the design is a bit off, like the images lack the shadow and gradient is not quite similar to that of the design.

  Other than that, everything else looks tidy. To speed up your styling process you might consider using tailwind as it will make dealing with css a breeze, although it has to be learned but after that, the developer experience is nothing to be matched. Also another piece of advice would be to avoid jquery as much as possible right now, because everyone seems to dislike nowadays.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @hamzaabde Thank you for the feedback. I know how to work with Tailwind, however, I like the good old CSS more, especially for projects which I am using to master CSS.

  0
• 

  Josh•110

  @JoshMoonerPosted over 2 years ago

  Excelent job! I've been watching your another solutions and you're improving and doing better and better. How do you build the mobile view and the responsive design? Do you use media queries or flex box? I don't know how to make the responsive design in my challenges, I mean, I code using media queries but it seem that doesn't work because when I visite the site on my phone the page looks break. Personally I don't have any to correct in your solution. I give you a 10/10.

  0

  ---

  

  Stanhope Jite•90

  @JyteCeoPosted over 2 years ago

  @JoshMooner I'd like to see your code and help you with media queries to the best of my ability . reach out at [email protected]

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @JoshMooner I usually use Chrome. You need to right-click and choose to inspect. It will show you developer tools and on top, you can choose the screen size - either type manually or choose the templates for devices. There are also different apps and extensions but I never really use any. Also, I try to test on my phones - Android and iPhone. Media query has its difficulties but you need to grasp the basics. For instance, if you make the design for desktop first, you need to use media query by going down in size, to say so. For example, if you created a desktop design you need to change something for a smaller size right? Let's say your computer width is 1440px and you want to change some container instead of horizontal (flex-direction: row) change to vertical (flex-direction: column). In the media query, you will indicate @media screen and (max-width: 1025px), for example, and change the flex-direction to the column. It is telling the browser is that when the screen will be less than 1025px change this and that. So make my flex-direction column when the screen size is a maximum of 1025px. If it will get more it means it will change back to the original. Then let's say you want this flex container to disappear when the screen size is 800px. You will write @media screen and (max-width: 800px), for example, and inside write display: none. It means that when the screen is 800px or less make my container disappear.

  To go through it again - your screen width is 1440px and you write that some flex container direction is row. Then when the screen is 1025px or less the flex-direction changes to the column. Then, when the screen is 800px or less this container disappears.

  And by using inspect(dev tools) in Chrome you can change the size of the screen to check what it will look like actually.

  This is like the very basics, not sure what level you are at. It also works differently if you are starting with mobile design first.

  2