Frontend Mentor - FAQ accordion card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, Marcin! 👋

  If you are not confident yet with the JavaScript then I highly suggest doing the HTML CSS challenges first. Also, it's going to make you comfortable with the workflow and hopefully, along the way gets some feedback to help you have a great fundamental of the HTML and CSS. 😉

  Once, you are confident with JavaScript, you can refactor this site with the following guide.

  • First, I would recommend using the native HTML elements to create the accordions, details and summary. By, default they are accessible so you don't need to worry about accessibility.
  • Second, the native accordion has already the opening and closing functionality. However, you can still have JavaScript that prevents the user from opening multiple accordion panels at a time. So, you can create a function that only allows the user to open one accordion panel. This way, you prevent the card from having too much height (because the accordion panels are opened).

  Also, some feedback.

  • The illustrations are decorative images which means that if they don't exist, there will be no content or information that is missing. So, I highly recommend leaving the alt empty.
  • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. So, I suggest setting the body font size instead.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.

  That's it! I hope this information is useful and good luck! 😁

  Marked as helpful

  2
• 

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  Hi congrats on this challenge, here what you can try to fix your issue:

  CSS

  .active .box__accordion--arrow {
  	position: relative;
  	height: 10px;
  	transition: 0.3s;
  	rotate: 180;
  }
  

  JS

  function openAccordionItems() {
      if (this.nextElementSibling.classList.contains('active')) {
          this.nextElementSibling.classList.remove('active')
          this.style.fontWeight = "400";
          
      } else {
          this.nextElementSibling.classList.add('active')
          this.style.fontWeight = "700";
        
      }
  }
  

  This will rotate only the arrow classes inside the active classes so you don't have to modify it inside the JS and you will have only one event listener. I'm not sure about this CSS selector I usually write in SCSS but it should be ok.

  Hope this will help you :)

  Happy coding :D

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MarcusTuliusCiceron Hi Ciceron! It's interesting that you aren't sure about something in CSS because usually, you write it in Sass (with SCSS syntax).

  .active .box__accordion--arrow, the browser reads CSS from right to left so it means that,

  • First, the browser is going to search for the element that has a class name of .box__accordion--arrow
  • Second, the browser is going to read the previous selector and as a result, it is going to search only the .box__accordion--arrow that has a parent element that contains an .active class.

  Reference: see the discussion on Stack Overflow.

  Hope this clears the confusion that you have! Happy coding too! 😄

  P.S. See the compiled code to understand what the Sass code is doing. 😉

  1