Achieve visibility of sibling <div> without the need for JavaScript by utilizing the :checked CSS pseudo class

I've been attempting to implement the technique demonstrated in this article, but I'm struggling to achieve the desired effect of revealing new elements after a radio button is selected.

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
}
<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
  <option display:none disabled selected value></option>
  <option value="highschool">High School</option>
  <option value="undergrad">Undergraduate</option>
  <option value="grad">Graduate</option>
  </select>
  </div>
</div>

htmlcsscss-selectors

Answer №1

Learn how to utilize the selector :checked + nextElSelector (Adjacent sibling selector) to target the element following a checked input:

span {
  visibility: hidden;
}
input:checked + span {
  visibility: visible;
}
<input type="checkbox"/><span>TADA!</span>

The CSS example provided is related to SASS within the same website, with a few elements omitted.

Answer №2

Revise your input selector to this:

input[type="radio"]:checked + .reveal-if-active {}

Take note of the +. This adjacent sibling selector must be present between the two to adjust the transparency of the concealed elements once the radio button is selected.

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
}

input[type="radio"]:checked + .reveal-if-active {
  opacity: 1;
  max-height: 100px;
  padding: 10px 20px;
  transform: scale(1);
  overflow: visible;
}
<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
      <option value="highschool">High School</option>
      <option value="undergrad">Undergraduate</option>
      <option value="grad">Graduate</option>
    </select>
  </div>
</div>

Answer №3

Here is an updated snippet in vanilla CSS

.show-on-click {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;

}
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
  
input[type="radio"]:checked + .show-on-click{
 opacity:1; 
 max-height:initial;
}
<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="show-on-click">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
  <option display:none disabled selected value></option>
  <option value="highschool">High School</option>
  <option value="undergrad">Undergraduate</option>
  <option value="grad">Graduate</option>
  </select>
  </div>
</div>

Answer №4

Here's how your selector ought to appear 

 input[type="radio"]:checked ~ .reveal-if-active{

Answer №5

Have you considered using Jquery?
You can determine whether the radio button is checked by using the code $(this).is(':checked') within the change function.

$(function() {
  $('#student').on("change", function() {
    $('.reveal-if-active').css({
      'opacity': '1',
      'max-height': '100px'
    });
  });
});
.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
  <option display:none disabled selected value></option>
  <option value="highschool">High School</option>
  <option value="undergrad">Undergraduate</option>
  <option value="grad">Graduate</option>
  </select>
  </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

Change a variable on the fly without needing to reload the page

<!DOCTYPE html> <!-- To update your slot machine images without refreshing the page, you can use JavaScript to dynamically change the images on click. Here's a simple example using JavaScript: <html> <head> <title& ...

phphtmlcss

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

javascriptjqueryhtml

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

csssass

Experiencing an unusual gap following the menu on mobile view for my WordPress website?

I recently launched a WordPress website dedicated to education. In order to make some adjustments, I added subheaders to each page with a simple display:none setting. Surprisingly, while everything looked perfect on desktop view, I noticed some extra spa ...

csswordpresstwitter-bootstrap

Creating HTML code from a multidimensional array is a useful skill to

I am looking to use PHP to generate HTML code similar to the following: <li id="821">Accessories for tablets and cell phones <ul> <li id="426">Cell Phone Accessories <ul> <li id="675">Stands and Docks</ ...

phphtmlarraysmultidimensional-array

"Enhance Your Website with Slider Swipe Effects using CSS3 and

After scouring the internet for various types of sliders, including swipe sliders, I am interested in creating a responsive swipe slider specifically for mobile phones. This would be a full page swipe slider where users can swipe left and right seamlessly. ...

javascriptphphtmlcss

Acquiring administrative authorization upon user login with PHP

I have developed a registration form and a login form using PHP. However, whenever I run this code, it displays the message "invalid username" when the username is invalid, or it says "your account isn't approved by admin yet." Can anyone please guide ...

phphtmlmysqlcssdatabase

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

<div class="row"> <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i"> <!-- small box --> <div class="small-box bg-dashboard-box" > <div class="inner"> <div class="text-black"> ...

htmlcssangulartwitter-bootstrap

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

Implementing a login system on my website using HTML - a step-by-step guide

https://i.sstatic.net/9hOx6.png ...

javascriptphphtmlcssauthentication

The use of htmltools::tags$iframe in Shiny to display an HTML file is not functioning properly when combined with renderUI()

Hello everyone, this is my first question on StackOverflow. I hope you can help me out even though my question may not be in the correct format. I have an HTML widget that was created using flowmapblue.R and saved as a file that I want to display in a Mar ...

htmliframeshiny

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

Warning: Validation issue in console.js at line 213 - It is not valid for a <div> element to be nested inside a <p> element. Please correct this nesting validation

react-dom.development.js:86 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. at p at http://localhost:5173/node_modules/.vite/deps/chunk-WQ5FBX7J.js?v=539aff10:2964:50 at Typography2 (http://localhost:5173/node_module ...

htmlreactjsmaterial-ui

The program encountered an error while trying to access the undefined property '_header'

An issue arises when the app.use(express.static("web")) line is executed. var express = require('express')(); var app = express(); var http = require('http').Server(app); var io = require('socket.io')(http); //app.get(&apo ...

javascripthtmlnode.jsimageexpress

HTML5 for advanced positioning and layering of multiple canvases

I have 2 canvas layers stacked atop each other, but I need to position them relative to the entire page. The dimensions of both layers are fixed at a width of 800 and a height of 300. My goal is to center the canvas layers regardless of screen size, with ...

javascriptjqueryhtmlcanvasscreen-positioning

Learn how to extract an ID created with AngularJS using JavaScript

I have a piece of code that generates multiple divs using ng-repeat and assigns each one an id based on a specific value. <div ng-repeat="item in $scope.items"> <div id="ajs-{{item.title}}">{{text}}</div> <script> v ...

javascripthtmlangularjs

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

phphtmlcsswordpress

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searc ...

csseffectslightingflashlightlight

What is the proper way to safely escape a JSON string for an object that contains user-generated content?

How can I correctly use the variable s for the value-field of an option-element while escaping user input used for key and value? var key='highway'; var value='track'; var s = JSON.stringfy({ [key]:value }, undefined,''); s ...

javascripthtmljsonescapinguser-input

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress