Can text be hidden and shown using just CSS (no JavaScript code)? [closed]

Answer 1

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the element is clicked:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}

Click me to toggle the content
CONTENT