How to Toggle Between Plus Minus Icon for Accordion-CodePudding

I am trying to take the Plus icon for my accordion and toggle it to a Minus icon on click using Javascript and then back to Plus when clicked again. Can anyone assist?

<div >


        
        <div >


            <button>
                <h3>Which services do you provide?</h3>
                <i ></i>

            </button>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. </p>


            
        </div>
</div>

.faqs-container {

    max-width: 90%;
    margin: 0 auto;

}



.faqs-question {
    width: 100%;
    border: 2px solid #999;
    border-radius: 4px;
    margin-bottom: 25px;

}

.faqs-container:hover{
    color: #999;
}


.faqs-question button{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border: none;
    outline: none;
    font-size: 24px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    color: #300600;
    cursor: pointer;
    transition: 0.6s ease-in-out;
}




.faqs-question button h3{
    font-size: 28px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    transition: 0.2s ease-in-out;
    padding: 10px;
}

.faqs-question button h3:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}


.faqs-question i{

    font-size: 48px;
    transition: 0.5s ease-in-out;
}

.faqs-question i:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}

.faqs-question p {
    margin-top: 10px;
    font-size: 24px;
    font-family: 'Merriweather-Sans', sans-serif;
    font-weight: 300;
    line-height: 55px;
    color: #444;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease;
}





.faqs-question p.show{
    max-height: 45vh;
    opacity: 1;
    padding: 10px 0px 40px 15px;
    padding-right: 40px;
    padding-left: 20px;
    margin-bottom: 35px;
}

<script>
    
 const buttons = document.querySelectorAll('button');

buttons.forEach( button =>{
    button.addEventListener('click',()=>{

          const faq = button.nextElementSibling;
            faq.classList.toggle('show');
            
         
    })
} )


</script>

I am not sure where to start. Although I figured out how to show the accordion answer onclick, I am not sure how to toggle the Minus icon..

CodePudding user response：

Please update your javascript code like this:

<script>
    const buttons = document.querySelectorAll('button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {

            const faq = button.nextElementSibling;
            faq.classList.toggle('show');

            const icon = button.children[1];
            if (icon.classList.contains('bi-plus')) {
                icon.className = "bi bi-dash";
            } else {
                icon.className = "bi bi-plus";
            }


        })
    })
</script>

CodePudding user response：

You can add the following to your existing javascript:

const icon = button.querySelector('.bi');

if (icon.classList.contains("bi-plus")) {
  icon.classList.toggle("bi-plus");
  icon.classList.toggle("bi-dash");
} else if (icon.classList.contains("bi-dash")) {
  icon.classList.toggle("bi-dash");
  icon.classList.toggle("bi-plus");
}

You can see it in action here: https://jsfiddle.net/hsabio/42tr8jq0/43/

CodePudding user response：

I also want you to keep in mind HTML has built in accordions, where almost no js is needed --> HTML Summary. Use whatever fits the purpose best.

Anyway. I just selected "every" plus icon so i got an "array/nodelist" of those icons. I added the index to the forEach Loop so I can tell what button exactly I am on. Now, if you have exactly the same number of button and icons on the page the index matches pferfectly to the icons every time. After that its time to modify the plus icon, when the button is clicked. Either adding and removing classes or something else. You could try something along the lines like this:

const buttons = document.querySelectorAll("button");
// cosnst icons = document.querySelctorAll('.bi-plus');

buttons.forEach((button, index) => {
  //adding index gives me the index of the current button
  button.addEventListener("click", () => {
    const faq = button.nextElementSibling;
    faq.classList.toggle("show");

    if (
      document.querySelector(".bi-plus").innerHTML ==
      "-" /*icons[index].classList.contains('bi-plus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = " ";
      //icons[index].classList.add('bi-minus');
      //icons[index].classList.remove('bi-plus');
    } else if (
      document.querySelector(".bi-plus").innerHTML ==
      " " /*icons[index].classList.contains('bi-minus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = "-";
      //icons[index].classList.remove('bi-minus');
      //icons[index].classList.add('bi-plus');
    }
  });
});

.faqs-container {
  max-width: 90%;
  margin: 0 auto;
}

.faqs-question {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin-bottom: 25px;
}

.faqs-container:hover {
  color: #999;
}

.faqs-question button {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border: none;
  outline: none;
  font-size: 24px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  color: #300600;
  cursor: pointer;
  transition: 0.6s ease-in-out;
}

.faqs-question button h3 {
  font-size: 28px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  transition: 0.2s ease-in-out;
  padding: 10px;
}

.faqs-question button h3:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question i {
  font-size: 48px;
  transition: 0.5s ease-in-out;
}

.faqs-question i:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question p {
  margin-top: 10px;
  font-size: 24px;
  font-family: "Merriweather-Sans", sans-serif;
  font-weight: 300;
  line-height: 55px;
  color: #444;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.6s ease;
}

.faqs-question p.show {
  max-height: 45vh;
  opacity: 1;
  padding: 10px 0px 40px 15px;
  padding-right: 40px;
  padding-left: 20px;
  margin-bottom: 35px;
}

<div >
  <div >
    <button>
      <h3>Which services do you provide?</h3>
      <i > </i><!-- added the plus for demonstartion (you can remove it) --->
    </button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  </div>
</div>