Innovative CSS trick for styling checkboxes alongside non-related content

Question

Innovative CSS trick for styling checkboxes alongside non-related content

The CSS checkbox hack demonstrated below assumes that the content is a sibling of the checkbox. By clicking on the label, the content will toggle.

Check out the DEMO here

<input id="checkbox" type="checkbox" />
<label for="checkbox">
  Toggle content
</label>
<div class="content">Content here</div>

#checkbox {
  display: none;
}

#checkbox:not(:checked) ~ .content {
  display: none;
}

Is it possible to achieve the same effect using only CSS if the content is not a sibling of the checkbox? For example:

<div>
  <input id="checkbox" type="checkbox" />
  <label for="checkbox">
    Toggle content
  </label>
</div>
<div class="content">Content here</div>

html css checkbox css-selectors

Answer 1

Answer №1

If you want to achieve this without a checkbox, you can utilize the :target pseudo class along with anchors. It may not be the most visually appealing solution, but it is achievable using CSS only:

a {
  color: #000000;
  text-decoration: none;
}

#off {
  display: none;
}

.content {
  display: none;
}

#your-target:target ~ .content {
  display: block;
}

#your-target:target #on {
  display: none;
}

#your-target:target #off {
  display: block;
}

<div id="your-target">
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</div>
<div class="content">Content here</div>

Answer 2

If you want to achieve this without a checkbox, you can utilize the :target pseudo class along with anchors. It may not be the most visually appealing solution, but it is achievable using CSS only:

a {
  color: #000000;
  text-decoration: none;
}

#off {
  display: none;
}

.content {
  display: none;
}

#your-target:target ~ .content {
  display: block;
}

#your-target:target #on {
  display: none;
}

#your-target:target #off {
  display: block;
}

<div id="your-target">
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</div>
<div class="content">Content here</div>

Innovative CSS trick for styling checkboxes alongside non-related content

Answer №1

Similar questions

JavaScript file isn't being called by index.html

Choose only the options that are present in both arrays

Activate a button only when a value is inputted into a text box associated with a chosen radio button

Countdown Timer App using Flask

Using AJAX to send data with a POST request in Django may not function properly

What is the process for inspecting the element within a div using jsname with JS?

What steps should be taken to validate an HTML5 form without actually submitting it?

Splitting the page in half

How can we incorporate "req.getParameter" within a "for loop" to store data in the database based on the user-defined quantity provided in another servlet?

What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

Struggling with pagination problems in Bootstrap 4 and looking to integrate QR code functionality into your blade template?

Is there a way to utilize a Javascript function to incorporate commas into a div tag?

Utilize OpenLayer3 to showcase Markers and Popups on your map

the pop-up modal function is malfunctioning

Sharing images on Facebook using Data URI

Tips for creating a scrolling animation effect with images

What is the best way to update the content of a modal using jQuery and AJAX?

What is the best way to display the output after retrieving an array?

Insert half a million records into a database table using JavaScript seamlessly without causing the webpage to crash

Error in jQuery submenu positioning issue