Skip to content

Instantly share code, notes, and snippets.

@dcyoung-dev
Created March 25, 2021 09:35
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dcyoung-dev/ff48079ef2b209d0476742a317e39be9 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment