根据单独的div中的输入显示/隐藏div-PURE HTML＆CSS

Question

我浏览了无数帖子和页面，似乎无法找到可行的解决方案。我在div（class =“ dd”）内有一组无线电输入和标签，当选中时，我需要它在相邻的div（class =“ exhibits”）中显示/隐藏相应的一组值。在将输入内容放入上述div（class =“ dd”）之前，我所做的工作。我将CSS更新为我认为可以使用的功能，但是显然我缺少了一些东西。理想情况下，输入和标签将作为下拉菜单使用，因为50个州中的每个州都将有一个输入/标签，这就是为什么我将它们放在div（class =“ dd”）中的原因。我尝试使用非常简单的选择/选择路线，但了解到一些局限性无法让我实现最终目标。如果不是这种情况，我愿意学习如何使用该选项。

任何帮助将不胜感激，因为我认为自己是新手并且渴望学习尽可能多的东西。

谢谢！ NL

下面是我现在要编写的代码。

body {
  margin: 0;
  text-align: left;
  font-family: Verdana;
  background: #f5f5f5;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:not([id="NA"]):checked+label {
  background: #595959;
  color: #fff;
}

input[type="radio"][id="AL"]:checked+label~.exhibits:not(.AL) {
  display: none;
}

input[type="radio"][id="AK"]:checked+label~.exhibits:not(.AK) {
  display: none;
}

.dd:hover label {
  display: block;
  position: relative;
}

label {
  width: 23%;
  position: relative;
  display: none;
  overflow: hidden;
  text-align: center;
  border:1px solid #595959;
  color: #222222;
  padding: 0.5%;
 
  margin-bottom: 0px;
  cursor: pointer;
}

label:first-of-type {
  display:block;
  border:1px solid #595959;
}
label:last-of-type {
  margin-bottom: 50px;
}

.exhibits {
  width: 90%;
}

.exhibits table {
  width: 100%;
}

.exhibits tr:nth-child(odd) {
  background: #c2c2c2;
}

.exhibits table td:first-of-type {
  width: 10%;
  text-align: center;
}

.exhibits table td:nth-of-type(2) {
  width: 40%;
  text-align: left;
}

.exhibits table td:nth-of-type(3) {
  width: 10%;
}

<div class="state-filter">
  <div class="dd">
    <input id="NA" name="state" type="radio" checked>
    <label for="NA">Select A State</label>
    <input id="AL" name="state" type="radio" />
    <label for="AL">Alabama</label>
    <input id="AK" name="state" type="radio" />
    <label for="AK">Alaska</label>
    <input id="AZ" name="state" type="radio" />
    <label for="AZ">Arizona</label>
  </div>
  <div class="exhibits AL">
    <table>
      <tr>
        <td>Item 1</td>
        <td>AL Item 1</td>
        <td>01/01/2018</td>
      </tr>
      <tr>
        <td>Item 2</td>
        <td><a href="#">AL Item 2</a></td>
        <td>01/01/2018</td>
      </tr>
      <tr>
        <td>Item 3</td>
        <td>AL Item 3</td>
        <td>01/01/2018</td>
      </tr>
    </table>
  </div>
  <div class="exhibits AK">
    <table>
      <tr>
        <td>Item 1</td>
        <td>AK Item 1</td>
        <td>01/01/2018</td>
      </tr>
      <tr>
        <td>Item 2</td>
        <td>AK Item 2</td>
        <td>01/01/2018</td>
      </tr>
      <tr>
        <td>Item 3</td>
        <td>AK Item 3</td>
        <td>01/01/2018</td>
      </tr>
    </table>
  </div>
</div>