Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices.

css only accordion codepen, pure css accordion with plus minus, accordion smooth transition css codepen, responsive vertical tabs to accordion, accordion in html and css only

How to make use of it:

1. Create tabs and tab panes to use radio input to switch between tabs and their content.

<div class="tabs">
  <input type="radio" name="tabs" id="tabone" checked="checked">
  <label for="tabone">Tab One</label>
  <div class="tab">
    <h1>Tab One</h1>
  </div>
  
  <input type="radio" name="tabs" id="tabtwo">
  <label for="tabtwo">Tab Two</label>
  <div class="tab">
    <h1>Tab Two</h1>
  </div>
  
  <input type="radio" name="tabs" id="tabthree">
  <label for="tabthree">Tab Three</label>
  <div class="tab">
    <h1>Tab Three</h1>
  </div>
  
</div>

2. Style tabs in CSS.

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.tabs label {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}
.tabs .tab {
  -webkit-box-ordinal-group: 100;
  -webkit-order: 99;
  -ms-flex-order: 99;
  order: 99;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fafafa;
}
.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.tabs input[type="radio"]:checked + label { background: #fafafa; }
.tabs input[type="radio"]:checked + label + .tab { display: block; }

3. Convert tabs to an accordion when the screen size is less than a certain breakpoint.

@media (max-width: 45em) {
.tabs .tab,  .tabs label {
  -webkit-box-ordinal-group: NaN;
  -webkit-order: initial;
  -ms-flex-order: initial;
  order: initial;
}
.tabs label {
  width: 100%;
  margin-right: 0;
  margin-top: 0.2rem;
}
}

Responsive CSS Only Accordion & Tabs Component plugin/codepen, pure css tabs responsive, horizontal accordion tabs html css


See Demo And Download

Official Website(mikestreety): Click Here

This superior jQuery/javascript plugin is developed by mikestreety. For extra Advanced Usage, please go to the official website.

Share