faq-accordion solution

Community feedback

• 

  accama muhammad•280

  @accamamuhammadPosted 11 months ago

  i was able to use javascript to toggle the text on and off: here's how i did it: HTML:

  <div class="toggle" id="main"> <h3>What is Frontend Mentor, and how will it help me?</h3>

          <img src="/assets/images/icon-minus.svg" alt="" id="toggle-minus" />
  
          <img src="/assets/images/icon-plus.svg" alt="" id="toggle-plus" />
  
        </div>
  
        <p id="display-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> 
  

  JAVASCRIPT: const toggleMinus = document.getElementById("toggle-minus");

  const togglePlus = document.getElementById("toggle-plus");

  const displayText = document.getElementById("display-text");

  const mainContainer = document.getElementById("main");

  togglePlus.style.display = "none";

  toggleMinus.addEventListener("click", () => { mainContainer.style.marginBottom = "15px";

  displayText.style.display = "none";

  togglePlus.style.display = "block";

  toggleMinus.style.display = "none";

  }); togglePlus.addEventListener("click", () => { mainContainer.style.marginBottom = "5px";

  displayText.style.display = "block";

  toggleMinus.style.display = "block";

  togglePlus.style.display = "none"; });

  0
• 

  shalomkerry•260

  @shalomkerryPosted 11 months ago

  use the classList.toggle('active') property to add a class to the content. Then you can manipulate it using Java Script. Check out my solutions of I did it.

  0