FAQ accordion

Community feedback

• 

  Dror Katzir•200

  @DorKatzirPosted 8 months ago

  Hi, good job and very nice accordion.

  I played little bit with your js code and reduced it to 1 loop. this is how i did it with 3 steps.

  Step 1:

  first I needed to add to your css styles 2 new classes, so i could toggle the Dom styles with js:

  .hide{
      display: none;
  }
  
  .section-title.minus{
      background: url(./images/icon-minus.svg) no-repeat center right;
  }
  

  Step 2.

  HTML file i added .hide class to all <p> tags except the first because i want it to be open at firt load of the page. also Only to the first title added the .minus class to show the minus icon because the text is also showen:

   <section class="section-container">
            <h2 class="section-title minus" tabindex="1">What is Frontend Mentor, and how will it help me?</h2>
            <p class="section-text">Frontend Mentor offers realistic coding challenges to help developers improve their 
              frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
              all levels and ideal for portfolio building.</p>
          </section>
  
          <section class="section-container">
            <h2 class="section-title" tabindex="2">Is Frontend Mentor free?</h2>
            <p class="section-text hide">Yes, Frontend Mentor offers both free and premium coding challenges, with the free 
              option providing access to a range of projects suitable for all skill levels.</p>
          </section>
  
          <section class="section-container">
            <h2 class="section-title" tabindex="3">Can I use Frontend Mentor projects in my portfolio?</h2>
            <p class="section-text hide">Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent
              way to showcase your skills to potential employers!</p>
          </section>
  
          <section class="section-container">
            <h2 class="section-title" tabindex="4">How can I get help if I'm stuck on a challenge?</h2>
            <p class="section-text hide">The best place to get help is inside Frontend Mentor's Discord community. There's a help 
              channel where you can ask questions and seek support from other community members.</p>    
          </section> 
  

  Step 3. I've used the classList.toggle() js method to toggle between classes, and also used the same loop for the Keyboard event. this is the reduced code:

  const clickOnTitle = document.querySelectorAll('h2');
  const sectionP = document.querySelectorAll('section p');
  
  for(let i = 0; i < clickOnTitle.length; i++)
  {
  	/*Mouse Event */
  	clickOnTitle[i].addEventListener('click', function () {
  		sectionP[i].classList.toggle('hide')
  		clickOnTitle[i].classList.toggle('minus')
  	})
  
  	/*Keyboard Event*/
  	clickOnTitle[i].addEventListener('keydown', event => {
  		if (event.key === 'Enter') {
  			sectionP[i].classList.toggle('hide')
  			clickOnTitle[i].classList.toggle('minus')
  		}
  	})
  }
  
  

  This code works well on my computer, didn't test it on mobile.

  If you have any question Iet me know.

  I hope you like my reduced code :)

  Marked as helpful

  1

  ---

  

  P

  Lo-Deck•2,650

  @Lo-DeckPosted 8 months ago

  Hi @DorKatzir,

  I've just tried on my PC and reduce the code to 1 loop, it's worked perfectly with .classList.toggle(), I will learn more about this JS method.

  Thanks.

  1