💪 Using data attributes for modified styling

<style>
    .card {
        /* Ignore these styles */
        width: 20rem;
        height: 20rem;
        border: 0.25rem dashed crimson;
        margin-block-start: 1rem;
    }

    .card[data-hidden=true] {
        display: none;
    }
</style>

<script>
  const toggleVisibility = () => {
    const cardElement = document.querySelector(".card")
    const currentVisibility = cardElement.dataset.hidden

    // currentVisibility will be either `undefined`, `"true"`, or `"false"`
    cardElement.dataset.hidden = currentVisibility !== "true"
  }
</script>

<button onclick="toggleVisibility()">Toggle the card</button>

<div class="card"></div>