Как сделать так чтобы при нажатии на кнопку, появлялся блок?

<style>
      section {
        color: white;
      }
      .card {
        width: 50px;
        height: 50px;
        background: grey;
      }
      [type="checkbox"]:checked + .card {
        background: white;
      }
    </style>
    <section>
      <label for="checkbox_id1">box 1</label>
      <input type="checkbox" id="checkbox_id1" />
      <div class="card"></div>
      <label for="checkbox_id2">box 2</label>
      <input type="checkbox" id="checkbox_id2" />
      <div class="card"></div>
      <label for="checkbox_id3">box 3</label>
      <input type="checkbox" id="checkbox_id3" />
      <div class="card"></div>
    </section>

<style type="text/css">
.buttons, .boxes {
    display: flex;
    justify-content: space-evenly;
    border: 1px solid grey;
    margin-bottom: 1em;
    padding: 1em;
}
.boxes > * {
    border: 1px solid grey;
    padding: 1em;
    background: teal;
    transition: transform 1s;
}
.transform {
    transform: rotateY(90deg);
}
</style>
 
<div class="buttons">
    <button data-box-id="box_1">btn 1</button>
    <button data-box-id="box_2">btn 2</button>
    <button data-box-id="box_3">btn 3</button>
</div>
<div class="boxes">
    <div id="box_1">box 1</div>
    <div id="box_2">box 2</div>
    <div id="box_3">box 3</div>
</div>
<script type="text/javascript">
buttons = document.querySelectorAll('[data-box-id]')
boxes = document.querySelectorAll('.boxes *')
buttons.forEach(button=>{
    button.addEventListener('click', () => {
        idBox = button.dataset.boxId
        boxes.forEach(box=>{
            attr = box.getAttribute('id')
            box.classList.remove('transform')
            if(attr!=idBox) {
                box.classList.add('transform')
            }
        })
    })
})
</script>