Pure CSS navigation - radio buttons to display or hide different pages

I'm attempting to create a website navigation bar using radio buttons, where the pages are displayed based on the selection.

So far, I've managed to achieve this using <a href='#div'></a> and a :target, by placing the .page div directly after the <label>.

However, I'm struggling to implement the same functionality with <input type='radio'> and the specific markup structure provided below.

Is it possible to accomplish this task?

The markup structure is as follows:

.page {
  display: none;
}

#pages > div:<the-missing-part> {
  display: block;
}
<div class="toolbar">

  <input type="radio" id="radio1" name="radios" value="div1">
  <label for="radio1">Div #1</label>

  <input type="radio" id="radio2" name="radios" value="div2">
  <label for="radio2">Div #2</label>

  <input type="radio" id="radio3" name="radios" value="div3">
  <label for="radio3">Div #3</label>

</div>

<div id="pages">

  <div id="div1" class="page">Page #1</div>

  <div id="div2" class="page">Page #2</div>

  <div id="div3" class="page">Page #3</div>

</div>

htmlcssnavigationcss-selectors

Answer №1

To achieve this, the pages and checkboxes must have a common parent element so they can be connected using the general sibling combinator (~):

.page {
  display: none;
}

#radio1:checked ~ #div1,
#radio2:checked ~ #div2,
#radio3:checked ~ #div3 {
  display: block;
}
<div class="toolbar">
  <input type="radio" id="radio1" name="radios" value="div1">
  <label for="radio1">Div #1</label>

  <input type="radio" id="radio2" name="radios" value="div2">
  <label for="radio2">Div #2</label>

  <input type="radio" id="radio3" name="radios" value="div3">
  <label for="radio3">Div #3</label>

  <div id="div1" class="page">Page #1</div>
  <div id="div2" class="page">Page #2</div>
  <div id="div3" class="page">Page #3</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

javascriptjqueryhtmlvideovideo-streaming

Customize the arrow color in a TextField Select component from material-ui

Having some trouble changing the color of my arrow icon within the Material-ui TextField Select. Here's what I've tried: icon: { fill: "white !important", }, Despite applying these props, the color remains unchanged. I've experimen ...

cssselectoverridingmaterial-ui

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

When working with react-native, I aim to utilize the 'contain' feature for vertical images and the 'stretch' feature for horizontal images. What would be the best way to determine the orientation of an image as either horizontal or vert ...

javascriptandroidioscssreact-native

Using multiple html files with ui-router's ui-view feature

Is it possible to create a complex UI using multiple HTML files with ui-view in AngularJS? I am trying to achieve a layout similar to this: I attempted to implement something on Plunker, but it seems like I'm struggling to grasp the underlying concep ...

javascripthtmlnode.jsangularjsangular-ui-router

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

The unique and personalized accordion panel is experiencing technical difficulties

Here is the accordion script I am using: $(document).ready(function(){ $(function(){ // Accordion Panels $(".accordion span").hide(); $(".accordion li").click(function(){ $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").sl ...

phpjqueryhtmlmysql

Registration form creation with file input type resulting in a database storing null values

When submitting my registration form, all entered values except the input type=file are being saved in the database. The file input returns a null value of "0" in the database, even though a file path is chosen from the desktop. I'm trying to figure o ...

phphtmlmysqli

Using the CSS trick of First-of-type and Last-of-type can result in shortened rounded edges when viewed in IE11

When using the radio+label trick to style radio buttons, a peculiar issue arises in Internet Explorer 11 (IE11). The first and last buttons in each set appear to have their bottom parts cut off or shortened, depending on the background displayed. Removing ...

cssinternet-explorercss-selectorscross-browser

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

javascriptjqueryhtmlcss

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

The footer at the bottom of the page is currently malfunctioning

I was able to create an always on the bottom footer using code from Codepen. Here is the HTML: <div class="content"> <header> <p>blabla</p> </header> <main> <p>blaBlabla blub</p ...

htmlcssapachexampp

Utilize a dynamic carousel with interactive lightbox functionality to display a stylish div containing captivating background

Is it possible to add a slick lightbox to a slider that only contains a div with a background image, but the lightbox doesn't display the image? What are your thoughts? $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, ar ...

jqueryhtmlcss

Reordering sections in a dynamic manner

I'm working on a single-page website with four sections arranged like this: <section id=“4”> <section id=“3”> <section id=“2”> <section id=“1”> Now, I want to change the order of these sections when scrolling ...

javascriptjqueryhtml

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...

javascriptjqueryhtmldatatables

Ensuring Contact Form Accuracy with Jquery Validation

I am trying to implement form validation using jQuery. Here is the code I am using: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2 /jquery.min.js"></script> <script type="text/javascript" src=" http:// ...

jqueryhtmljquery-validatevalidation

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

javascriptjqueryhtmlcss

Attempting to determine the smallest and largest dimensions of two values using CSS3

Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the ...

cssionic-frameworkimage-size

Release a stationary element upon scrolling down the page

I have a calculator feature on my website which was coded in php. At the end of this calculator, there is a section that displays the results. While the results div works properly on desktop, I am looking to implement a fix for mobile devices. Specificall ...

javascriptjquerycsssticky

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline

Drawer component from Material-UI placed on top of the sidebar

Currently, I am working on a project where I am using React TypeScript along with Material-UI. The issue that I am encountering is related to the width of the Drawer component provided by Material-UI. By default, the Drawer takes up the entire screen wid ...

cssreactjsmaterial-ui