CODEWITHSUNDEEP
htmlcss
GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Show/hide content based on anchor; show first by default

With pure HTML and CSS it is possible to show and hide content with an anchor tag:

#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}
<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>

But how can I display the first (red) item on page load?

Upvotes: 2

Views: 106

Answers (4)

user9592339
user9592339

Reputation:

Solution(s) :- 

<style>
#red {
  background: red;
}
#blue {
    background: blue;
}
#green {
    background: green;
}
.box {
  display: none;
}
.box:target {
    display: block;
}

</style>
<a href="#red">Red item</a> | 
<a href="#blue">Blue item</a> | 
<a href="#green">Green item</a>

<div class="box" id="red">Red</div>
<div class="box" id="blue">Blue</div>
<div class="box" id="green">Green</div>

Explanation(s) :-

I Finally found a solution for your answer but ...
for it to work properly , you need to add a background color ....
finally , I hope that it is what you wanted .....

Notes And References :-

currently , i have no references for above codes , 
but ,
NOTE : Please Add Background color fr it to work properly

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273513

The solution is somehow easy but I cannot show it here. If you are using this code within a page you simply need to append the anchor of the the first a tag to the url to activate its target. So you need to simply do something like this:

wwww.page.html#red

Here is a screenshot of the result:

enter image description here

This will work without modifying the code and you can choose which one to make visible at the start.

Upvotes: 1

Nidhi
Nidhi

Reputation: 1443

You can try this:

#red { background: red; display:block;}
#blue { background: blue; }
#green { background: green; }
.box {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.box:target {
  display: block;
}
.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}
<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="wrapper">
  <div class="box" id="red"></div>
  <div class="box" id="blue"></div>
  <div class="box" id="green"></div>
</div>

Upvotes: 0

Axnyff
Axnyff

Reputation: 9964

If you're ok with modifying the html, and putting the red box last then you can do something like:

#red {
  background: red;
  display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}
.box:target ~ #red {
    display: none;
}

Upvotes: 1

Related Questions