Display or conceal information depending on the anchor; reveal the first one automatically

Question

Display or conceal information depending on the anchor; reveal the first one automatically

Utilizing only HTML and CSS, we can achieve the functionality of displaying and hiding content using 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>

To automatically display the first item (red) during page load, additional styling or scripting may be required.

html css

Answer 1

Answer №1

If you're comfortable making changes to the html code and want the red box to appear last, then you can try this approach:

#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;
}

Answer 2

If you're comfortable making changes to the html code and want the red box to appear last, then you can try this approach:

#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;
}

Answer 3

Answer №2

While I can't reveal the solution here, it's actually quite simple. If you're incorporating this code into a webpage, all you have to do is append the anchor of the first a tag to the URL in order to activate its target. It should look something like this:

wwww.page.html#red

Below is a screenshot showing the end result:

https://i.sstatic.net/6IuvT.png

This method allows you to toggle between different options without needing to modify the code itself.

Answer 4

While I can't reveal the solution here, it's actually quite simple. If you're incorporating this code into a webpage, all you have to do is append the anchor of the first a tag to the URL in order to activate its target. It should look something like this:

wwww.page.html#red

Below is a screenshot showing the end result:

https://i.sstatic.net/6IuvT.png

This method allows you to toggle between different options without needing to modify the code itself.

Answer 5

Answer №3

If you're looking to experiment with some code, give this a try:

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

Answer 6

If you're looking to experiment with some code, give this a try:

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

Answer 7

Answer №4

Solutions for Colorful Display

<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 of Code:

I have discovered a way to make the items appear colorfully. However, for it to work correctly, you must specify a background color. I hope this is the desired outcome.

Notes and Sources:

At this time, I do not have any specific sources for the provided code snippet. Please remember to add a background color to ensure proper functionality.

Answer 8

Solutions for Colorful Display

<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 of Code:

I have discovered a way to make the items appear colorfully. However, for it to work correctly, you must specify a background color. I hope this is the desired outcome.

Notes and Sources:

At this time, I do not have any specific sources for the provided code snippet. Please remember to add a background color to ensure proper functionality.

Display or conceal information depending on the anchor; reveal the first one automatically

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When clicking on a name in the leaderboard, receive comprehensive information in a separate window or a popup

Unique design for circular checkbox inside Bootstrap popover

Ensuring the input field and button are positioned in a horizontal line

How can I create curved text in Three.js?

What is the best way to display value in a dropdown option field using Laravel?

Unable to hear sound - JavaScript glitch

Discovering elements with Selenium through XPATH or CSS Selector

When provided with no input, the function will output true

Wicked_PDF struggles to display Bootstrap 4 styles

Capture an image of the canvas and showcase it on a different HTML page using solely JavaScript

Enhancing WordPress Menus with Icons in PHP

How can I modify the text that appears when hovering over an element?

I am looking to remove the magnificent popup jQuery effect

Encountering an issue in Angular 8 where a class is not being added after the page loads, resulting in an

I am currently working on a one-page website that will feature both a Careers form and a Contact Us form. However, I am facing a challenge with the submission

php$json_data = json_decode($response);

Container Slides Along Despite Accurate Measurements

Ways to position cards within a carousel using Bootstrap 5

While experimenting with Express and node, I decided to utilize Fetch to send some data to the server. However, I encountered a frustrating 405 error. I am currently at a loss on how to troubleshoot and resolve this

Issue with Bootstrap 4 nested collapse: "data-parent" attribute malfunctioning