Question 45119 in Html Question posted in
Some basic documentation can be found here.

How to change background image of a collapsible through JavaScript – Html

I have a background image of a down arrow to show the drawer being closed, and I would like it to be changed to an up arrow when you open the drawer.

I have tried adding to my JS function to open and close the drawer but my inexperience is showing.

I have included the function that I used to open and close the collapisble, I just need to either add upon that function, or create a new one to switch the two arrow images when you open and close the drawer.

document.querySelectorAll(".collapsible").forEach((coll) => {
          coll.addEventListener("click", () => {
            coll.classList.toggle("active");

            const content = coll.nextElementSibling;

            if (content.style.maxHeight) {
              content.style.maxHeight = null;
              // Add this:
              content.style.borderWidth = 0;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
              // And this:
              content.style.borderWidth = "1px";
            }
          });
        });
.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition:
    border 0.2s ease-out,
    max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}

button {

  background-image: url("../images/upArrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 5%;

#backArrow {

  width: 1%;
  padding: 0px;
  padding-right: 2px;

}
<button type="button" class="collapsible"> Consult Logs </button>

        <div class="content">
          <div class="column">
            <p>Ensure the disc strength is not at “0”.</p>
          </div>
          <div class="column">
            <img src="../images/discStrength.png" alt="Picture of Logs">
          </div>
        </div>
Tags:

2

Answers


  1. 0

    Edit:

    Thanks for Oskar Grosser, style.backgroundImage won’t remove previously added inline styles.

    coll.style.backgroundImage = 'url(../images/downArrow.svg)'

    Use style.cssText to change background img

    coll.style.cssText = 'background-image:url(../images/downArrow.svg)'
    Login or Signup to reply.
  2. 0

    create two classes in your CSS, one for the up arrow and another for the down arrow, then add and remove them with javascript.

    Note:

    1- add the down arrow onload out of the function.

    2- use small-size svg/png. I just used these links as an example, and the first load takes longer.

    const btn = document.getElementById("btn");
// add up arrow on load
btn.classList.add("btndown");

document.querySelectorAll(".collapsible").forEach((coll) => {
    coll.addEventListener("click", () => {
      coll.classList.toggle("active");

      const content = coll.nextElementSibling;
      const btn = document.getElementById("btn");
      btn.classList.add("btndown");

      if (content.style.maxHeight) {
        content.style.maxHeight = null;
        // Add this:
        content.style.borderWidth = 0;

      } else {
        content.style.maxHeight = content.scrollHeight + "px";
        // And this:
        content.style.borderWidth = "1px";
        btn.classList.remove("btndown");
        btn.classList.add("btnup");
      }
    });
  });
    .collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition:
    border 0.2s ease-out,
    max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}
/* 
button {

  background-image: url("../images/upArrow.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 5%;
} */

.btnup {
    background-image: url("https://cdn-icons-png.flaticon.com/512/1634/1634156.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 5%;
  }
  .btndown {
    background-image: url("https://cdn-icons-png.flaticon.com/512/1634/1634155.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 5%;
  }

#backArrow {

  width: 1%;
  padding: 0px;
  padding-right: 2px;

}
      <button type="button" class="collapsible" id="btn"> Consult Logs </button>

        <div class="content">
          <div class="column">
            <p>Ensure the disc strength is not at “0”.</p>
          </div>
          <div class="column">
            <img src="../images/discStrength.png" alt="Picture of Logs">
          </div>
        </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search