FAQ accordion

Community feedback

• 

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 24 days ago

  Great Work on the Accordion Component!

  I appreciate the effort you’ve put into this! Just a small suggestion to enhance user experience based on the design intentions:

  1. Set One Element Active by Default:

     • According to the design, one element should be active by default. This is a simple yet effective way to guide users on how to interact with the accordion. You can easily achieve this with the active class and a bit of JavaScript.

     Here's a snippet of code that illustrates how to set the first accordion item as active by default:

     // Select all accordion items
     const accordionItems = document.querySelectorAll('.accordion__item');
     
     // Set the first item to active
     if (accordionItems.length > 0) {
         const firstItem = accordionItems[0];
         firstItem.classList.add('active');
     
         // Show content and update icons for the active item
         const plusIcon = firstItem.querySelector('.icon__open');
         const minusIcon = firstItem.querySelector('.icon__close');
         const content = firstItem.querySelector('.accordion__item--content');
     
         plusIcon.classList.add('hidden'); 
         minusIcon.classList.remove('hidden'); 
         content.style.display = 'block'; 
     }
     
     // The existing click event listener code remains unchanged
     document.querySelectorAll('.accordion__item--title').forEach(item => {
         item.addEventListener('click', () => {
             const parent = item.parentElement;
     
             document.querySelectorAll('.accordion__item').forEach(child => {
                 const plusIcon = child.querySelector('.icon__open');
                 const minusIcon = child.querySelector('.icon__close');
                 const content = child.querySelector('.accordion__item--content');
     
                 if (child !== parent) {
                     child.classList.remove('active');
                     plusIcon.classList.remove('hidden'); 
                     minusIcon.classList.add('hidden'); 
                     content.style.display = 'none'; 
                 }
             });
     
             parent.classList.toggle('active');
             const plusIcon = parent.querySelector('.icon__open');
             const minusIcon = parent.querySelector('.icon__close');
             const content = parent.querySelector('.accordion__item--content');
     
             if (parent.classList.contains('active')) {
                 plusIcon.classList.add('hidden'); 
                 minusIcon.classList.remove('hidden'); 
                 content.style.display = 'block'; 
             } else {
                 plusIcon.classList.remove('hidden'); 
                 minusIcon.classList.add('hidden'); 
                 content.style.display = 'none'; 
             }
         });
     });
     

  This approach ensures that users can see content immediately without any additional clicks, making it a smoother experience. Great job so far, and I’m excited to see how this enhancement improves the overall usability!

  2

  ---

  

  KapteynUniverse•2,070

  @KapteynUniversePosted 24 days ago

  Hey @Fixito and @Grimm-N, since Thomas used details tag i recommend "open" attribute for that.

  There is also a name attribute, it connects the details together and when you open one, it closes the other. But for some reason frontendmentor gave an error ("Attribute "name" not allowed on element "details" at this point.") on the HTML report for the name attribute to me. But i think i used it correctly.

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#attributes

  <details name="faq" open">...</details>
  <details name="faq">...</details>
  <details name="faq">...</details>
  <details name="faq">...</details>
  

  Marked as helpful

  1

  

  P

  Thomas•350

  @FixitoPosted 23 days ago

  @Grimm-N @KapteynUniverse I applied your suggestions. Apparently the name attribute has not yet supported by browsers, but this will be done in the future.

  2