lundi 19 juillet 2021

With a pure css accordion with checkbox, can you open and close all open tabs?

Code is from here --> https://codepen.io/raubaca/pen/PZzpVe

I have looked at the other answers to questions similar to this. Nothing actually answers this question sufficiently. Or else they're about slightly convergent issues, or use jquery etc, or for css in a different format.

When using the checkbox method to make a pure css accordion where you can have multiple tabs open at one time, is it possible to close all the tabs at once? And also open all the tabs at once? I'm assuming I can do something like input:unchecked ~ .tab-content {...} But there's no input:unchecked in the css specs.

@charset "UTF-8";
body {
  color: #2c3e50;
  background: #ecf0f1;
  padding: 0 1em 1em;
}

h1 {
  margin: 0;
  line-height: 2;
  text-align: center;
}

h2 {
  margin: 0 0 0.5em;
  font-weight: normal;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.row {
  display: flex;
}
.row .col {
  flex: 1;
}
.row .col:last-child {
  margin-left: 1em;
}

/* Accordion styles */
.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
  /* Icon */
}
.tab-label:hover {
  background: #1a252f;
}
.tab-label::after {
  content: "❯";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}
.tab-close, .tab-open {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}

input:checked + .tab-label {
  background: #1a252f;
}
input:checked + .tab-label::after {
  transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
        <!-- <h1>Pure CSS Accordion <sup>2.0</sup></h1> -->
        <div class="row">
          <div class="col">
            <h2>Open <b>multiple</b></h2>
            <div class="tabs">
                <div class="tab">
                    <input type="checkbox" id="chck0" name="chk">
                    <label for="chck0" class="tab-open">Open All &times;</label>
                  </div>
              <div class="tab">
                <input type="checkbox" id="chck1"  name="chk">
                <label class="tab-label" for="chck1">Item 1</label>
                <div class="tab-content">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
                </div>
              </div>
              <div class="tab">
                <input type="checkbox" id="chck2"  name="chk">
                <label class="tab-label" for="chck2">Item 2</label>
                <div class="tab-content">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
                </div>
              </div>
              <div class="tab">
                <input type="checkbox" id="chck3" name="chk">
                <label for="chck3" class="tab-close">Close All &times;</label>
              </div>
            </div>
          </div>



Aucun commentaire:

Enregistrer un commentaire