mobilní záložky jen css

by Petr Haluza

HTML

<div class="mobile-tabs">
<!-- mobile-tabs switch1 --> 
  <input type="radio" name="mobileTabs" id="mobile-tab-one">
  <label for="mobile-tab-one">Dotazy k produktu</label>
  
  
  <div class="mobile-tab-content"><!-- mobile-tab 1 --> 
    <h1>Dotazy k produktu</h1>
    <p>ahoj ahpj </p>
  </div><!-- /mobile-tab 1 -->
  
  <input type="radio" name="mobileTabs" id="mobile-tab-two" checked>
  <label for="mobile-tab-two">Recenze a hodnocení</label>
  
  <div class="mobile-tab-content"><!-- mobile-tab 2 --> 
    <h1>Recenze a hodnocení</h1>
    <p>ahpj ahpj</p>
  </div><!-- /mobile-tab 2 -->

</div><!-- /mobile-tabs -->

CSS

/** code by webdevtrick ( https://webdevtrick.com ) */
.mobile-tabs { display: flex; flex-wrap: wrap}
.mobile-tabs label { order: 1; flex-grow: 1; text-align:center;display: block; padding: .75em 1em; cursor: pointer; background:  #3CC0F8; font-weight: bold; transition: background ease 0.2s; border-radius: 4px 4px 0 0; margin-right:3px}
.mobile-tabs label:first-of-type {margin-left:3px}
.mobile-tabs .mobile-tab-content { order: 99; flex-grow: 1; width: 100%; display: none; padding: 1rem; background: #fff}
.mobile-tabs input[type="radio"] { display: none}
.mobile-tabs input[type="radio"]:checked + label { background: #fff}
.mobile-tabs input[type="radio"]:checked + label + .mobile-tab-content { display: block}
 
@media (max-width: 340px) {
 .mobile-tabs .mobile-tab-content, .mobile-tabs label { order: initial }
 .mobile-tabs label { width: 100%; margin-right: 0; margin-top: 3px}
}
 
body {
  background: #333;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 14px;
}