How do I make a div visible on clicking a link using only HTML and CSS?

We can achieve this using: target attribute

let see below example

HTML part

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How do I make a div visible on clicking a link using only HTML and CSS?</title>
</head>

<body>
  <a href="#firstDiv">firstDiv Div</a>
  <a href="#secondDiv">secondDiv Div</a>
  <div class="div" id="firstDiv" style="display:none">firstDiv</div>
  <div class="div" id="secondDiv" style="display:none">secondDiv</div>
</body>

</html>

CSS part

<style>
  .div:target {
    display: block !important;
  }
</style>

Full page with HTML and CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How do I make a div visible on clicking a link using only HTML and CSS?</title>

  <style>
    .div:target {
      display: block !important;
    }
  </style>
</head>

<body>
  <a href="#firstDiv">firstDiv Div</a>
  <a href="#secondDiv">secondDiv Div</a>
  <div class="div" id="firstDiv" style="display:none">firstDiv</div>
  <div class="div" id="secondDiv" style="display:none">secondDiv</div>
</body>

</html>