css Question posted in
Some basic documentation can be found here.

Tabs on css again

I can’t change the html code according to the assignment. How to make buttons above the content. The difficulty is that the label is included in the tab. When you click on the label, the tab is assigned the class active.

There are no problems with the vertical version (if the buttons are to the left of the content).

$(".option").on('click', function () {
    $('.tab.active').removeClass('active');
    $(this).closest('.tab').addClass("active");
});
.tabs{
  display:flex;
  align-items: flex-start;
}

.tab{
  display: block;
  order:1;
}

label{
background: #999;
  top: 0;
  order: 0;
  margin-right:10px;
}

.option-details{
display: none;
}

.tab.active .option-details{
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">
  <label class="option">
    <input name="delivery_id" type="radio" checked="checked" value="4546661" />
    <span>
      header 1
    </span>
  </label>
  <div class="option-details">
    Content 1
  </div>
</div>
    <div class="tab">
  <label class="option">
    <input name="delivery_id" type="radio" value="65465" />
    <span>
      header 2
    </span>
  </label>
  <div class="option-details">
    Content 2               
  </div>
</div>
</div>

I managed to use flexbox and order, but the second label in this case has an indent from the first in the width of the content 1. In my version, this is possible only with javascript or is it possible to do it somehow in CSS?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    That's what I needed.

    Variant - display: flex:

    $(".option").on('click', function () {
  $('.tab.active').removeClass('active');
  $(this).closest('.tab').addClass("active");
});
    .tabs {
    display: flex;
    flex-wrap: wrap;
}

.tab {
    display: contents;
}

label {
    background: #999;
    order: 1;
}

.option-details {
    display: none;
}

.tab.active .option-details {
    display: flex;
    order: 2;
    width: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">
  <label class="option">
    <input name="delivery_id" type="radio" checked="checked" value="4546661">
    <span>
      header 1
    </span>
  </label>
  <div class="option-details">
    Content 1
  </div>
</div>
    <div class="tab">
  <label class="option">
    <input name="delivery_id" type="radio" value="65465">
    <span>
      header 2
    </span>
  </label>
  <div class="option-details">
    Content 2               
  </div>
</div>
</div>

    Variant - display: grid:

    $(".option").on('click', function () {
    $('.tab.active').removeClass('active');
    $(this).closest('.tab').addClass("active");
  });
    .tabs {
    display: grid;
    grid-template-areas: "A B" "C C";
}

.tab {
    display: contents;
}
label {
    background: #999;
}

.option-details {
    display: none;
    grid-area: C;
}

.tab.active .option-details {
    display: grid;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">
  <label class="option">
    <input name="delivery_id" type="radio" checked="checked" value="4546661">
    <span>
      header 1
    </span>
  </label>
  <div class="option-details">
    Content 1
  </div>
</div>
    <div class="tab">
  <label class="option">
    <input name="delivery_id" type="radio" value="65465">
    <span>
      header 2
    </span>
  </label>
  <div class="option-details">
    Content 2               
  </div>
</div>
</div>

    But maybe there is a more elegant solution


  2. 0

    There is another simple solution with CSS and without changing any order.

    By setting position: relative; of .tabs and
    by setting position: absolute; left: 0; of .tab.active .option-details.

    .tabs {
  display: flex;
  align-items: flex-start;
  
  position: relative;
}

.tab {
  display: block;
  order: 1;
}

label {
  background: #999;
  top: 0;
  order: 0;
  margin-right: 10px;
}

.option-details {
  display: none;
}

.tab.active .option-details {
  display: flex;
  padding: 5px;
  
  position: absolute;
  left: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
  <div class="tab active">
    <label class="option">
      <input name="delivery_id" type="radio" value="4546661" checked="checked" />
      <span> header 1 </span>
    </label>
    <div class="option-details">Content 1</div>
  </div>
  <div class="tab">
    <label class="option">
      <input name="delivery_id" type="radio" value="65465" />
      <span> header 2 </span>
    </label>
    <div class="option-details">Content 2</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search