CODEWITHSUNDEEP
htmlcss
Devil Tech
Devil Tech

Reputation: 27

Open first tab only css

i have this problem! I would like link 1 at the opening of the page to be seen already open! i use this code as a tab but i just can't find the solution. can you help me with only css and not js because the system does not support it? I would like the first tab link1 to open the page to be already open! thank you all !

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
<div class="tab">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

Upvotes: 1

Views: 94

Answers (1)

Temani Afif
Temani Afif

Reputation: 272667

The :has() selector can solve this:

.tab div {
  display: none;
}

.tab div:target,
.tab div:first-of-type {
  display: block;
}

.tab div:has(~ div:target) {
  display:none;
}
<div class="tab">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

If you want better support, I recommend placing the first section at the end:

.tab div {
  display: none;
}

.tab div:target,
.tab div:last-of-type {
  display: block;
}

.tab div:target ~ div {
  display:none;
}
<div class="tab">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>
</div>

Upvotes: 1

Related Questions