Tabs on css again - Stack Overflow

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=".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 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/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?

• css
• tabs

Share Improve this question Follow edited Nov 20, 2024 at 8:32 Angry Fox asked Nov 20, 2024 at 7:18 Angry FoxAngry Fox 6111 silver badge99 bronze badges 8

• What is the issue here? By default the labels should be above the content unless you changed the default behavior. – tacoshy Commented Nov 20, 2024 at 7:26
• I don't understand how the display:block will help. I only see the option to use the position:absolute, for each label, and substitute the left for the width of the labels on the left – Angry Fox Commented Nov 20, 2024 at 7:29
• 1 Assuming I've understood your requirements, then yes, this can be done in CSS alone. But it is an exercise in display: grid, not flexbox. – Alohci Commented Nov 20, 2024 at 8:10
• 1 The .tabs element. – Alohci Commented Nov 20, 2024 at 8:43
• 1 Actually, my bad. It can be achieved with flexbox as well as grid. The key trick in either case is .tab { display: contents; } – Alohci Commented Nov 20, 2024 at 9:14

 |  Show 3 more comments

2 Answers 2

Sorted by: Reset to default 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/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/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

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