How to hide a border when a collapsible container is hidden? - Html

Jason
February 19, 2023
173 views
0 votes
2 Answers

I am trying to hide the border of a collapsible drawer when it is closed. Currently, it still shows the border when it is closed, indicated by the line under each drawer selector. How would I go about hiding it?

HTML:

        <button type="button" class="collapsible"> Loose Crimp Issue </button>

        <div class="content">
          <div class="column">
            <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
          </div>
          <div class="column">
            <img src="../images/looseCrimp.png" alt="Picture of Connectors">
          </div>
        </div>

CSS:

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

.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;
}

        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight){
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
            }
          });
        }

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

.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;
}

.active, .collapsible:hover {
  background-color: #f7f7f7;
}

        <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>

I tried to hide and show the border on click. It worked once, then just deleted the border after the first time.

Answers

You can add a class to the button when it is clicked (using onclick), and use that to modify the CSS for the .collapsible class to remove the border when that class is present. Here’s an (untested) example:

HTML:

<button type="button" class="collapsible" onclick="this.classList.toggle('active')">Loose Crimp Issue</button>

<div class="content">
  <div class="column">
    <p>Check that the wires and crimps are fully inserted into J1, J4, and transducer connectors.</p>
  </div>
  <div class="column">
    <img src="../images/looseCrimp.png" alt="Picture of Connectors">
  </div>
</div>

CSS:

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

.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;
}

.collapsible.active {
  border: none;
}

The simplest option is to also set border-width: 0 and apply a transition to it:

const button = document.querySelector('.button')
const collapsible = document.querySelector('.collapsible')

button.addEventListener('click', () => {
  const content = collapsible.querySelector('.content')
    
  collapsible.style.setProperty('--maxHeight', `${ content.offsetHeight }px`)
  collapsible.classList.toggle('expanded')
})

.button {
  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;
}

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

.collapsible.expanded {
  max-height: var(--maxHeight, 256px);
  border-width: 1px;
}

<button type="button" class="button">Loose Crimp Issue</button>

<div class="collapsible">
  <div class="content">
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
  </div>
</div>

Alternatively, move the styling of the card (border, border-radius, padding, etc.) to a new child inside the element you are going to collapse (the one that gets the max-height:

const button = document.querySelector('.button')
const collapsible = document.querySelector('.collapsible')

button.addEventListener('click', () => {
  const content = collapsible.querySelector('.content')
    
  collapsible.style.setProperty('--maxHeight', `${ content.offsetHeight }px`)
  collapsible.classList.toggle('expanded')
})

.button {
  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;
}

.collapsible {
  overflow: hidden;
  max-height: 0;
  transition:max-height 0.2s ease-out;
}

.collapsible.expanded {
  max-height: var(--maxHeight, 256px);
}

.content {
  background-color: white;
  padding: 0 18px;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
}

<button type="button" class="button">Loose Crimp Issue</button>

<div class="collapsible">
  <div class="content">
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
    <div class="column">
      <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
    </div>
  </div>
</div>

First solution (set border-width: 0) with your original code (without using additional CSS classes):

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";
    }
  });
});

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

.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;
}

.active, .collapsible:hover {
  background-color: #f7f7f7;
}

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to hide a border when a collapsible container is hidden? – Html

Answers