Display the element when the radio button is selected

Looking to display a p element when a input[type=radio] is checked.

Here is the HTML code:

<div class="form-group checkbox">
    <input type="radio" id="pago-deposito" name="[transaccion]pago"/>
    <label for="pago-deposito">check1</label>
    <p id="pago-hint">
        //hints
    </p>
</div>

These are the CSS styles I've tested:

.checkbox > input#pago-deposito[type=radio]:checked + p#pago-hint{
    display: block;
}

#pago-hint{
    display: none;
    line-height: 40px;  
}

I have successfully used this method in another instance, but it's not working here for some reason.

htmlcss

Answer №1

To achieve the desired effect, it is recommended to utilize the general sibling selector (~) instead of the adjacent sibling selector(+) because #pago-hint is not immediately following your radio button:

.checkbox > input#pago-deposito[type=radio]:checked ~ p#pago-hint{
    display: block;
}

#pago-hint{
    display: none;
    line-height: 40px;  
}
<div class="form-group checkbox">
    <input type="radio" id="pago-deposito" name="[transaccion]pago"/>
    <label for="pago-deposito">check1</label>
    <p id="pago-hint">
        //hints
    </p>
</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

What could be causing the position-sticky feature to malfunction within a nested nav on Bootstrap version 5.3.1?

I'm in the process of developing a user-friendly dashboard that incorporates Bootstrap 5.3.1's nested nav feature. However, I've encountered a problem where the navigation disappears when there is too much content on the page. To address thi ...

htmlcsstwitter-bootstrappositionbootstrap-5

Continual running of a jquery command

Here is a snippet of jQuery code that may need some clarification. In this code, when the element with ID 'box1' is clicked, it triggers an event that directs to a modal dialog where there is a class called 'colors'. The issue here is t ...

javascriptjqueryhtmlcss

Altering child components' properties from the parent component in Vue.js

Presenting the Tabs.vue component featuring four tabs: <template> . . <v-tab href="#tab-1" @click="showFirstTabFunc"> First Tab <v-icon>check_box_outline_blank</v-icon> </v-tab> <v-tab hr ...

javascripthtmlvue.jsvuejs2vuetify.js

A pop-up window displaying an electron error message appears, but no errors are logged in the console

In a Nutshell: While developing a single-page website with Electron, I encountered the common issue of jQuery not being globally accessible. To tackle this problem, I decided to simplify it by using a quick start example, but unfortunately, I'm strugg ...

javascripthtmljqueryelectron

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

javascriptjqueryhtmlcssdom

Having trouble positioning the brand on its own line above the navigation in a Bootstrap 3 navbar

Whilst it seems like a straightforward task, I have yet to discover a solution or encounter anyone facing the same issue. My objective is to place the brand on a separate line above the main navigation within the navbar structure. Despite my attempts to ad ...

htmlcsstwitter-bootstrap-3navbar

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

javascripthtmlajax

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

htmlangularlegendtimepicker

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

htmlcss

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Currently utilizing the following command with wget: wget --page-requisites --convert-links -e robots=off \ --span-hosts --restrict-file-names=windows \ --directory-prefix=$ASSETS_DIR --no-directories http://myhost/home The HTML page ...

csswget

Children of flex items sharing the same height

I'm struggling with creating a flexbox responsive grid and need some guidance. My goal is to make all the .block divs have equal height, with the .bottom div positioned at the bottom. The current solution achieves this, but when the h2 heading spans ...

htmlcssflexbox

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

javascriptjqueryhtmlreactjs

Finding the perfect label for effective web scraping with rvest

I am struggling to identify the correct tag to extract the specific text from a webpage. The HTML snippet in question is provided below. The text I am aiming to scrape is "Melbourne Storm has achieved 4 tries Brisbane Broncos has achieved 2 tries" Despite ...

htmlcssrweb-scrapingrvest

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

javascripthtmlcssweb-componentshadow-dom

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

javascriptjquerycss

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

Displaying the Indian Rupee symbol in PHP

I'm attempting to show the Indian rupee symbol using HTML code ₹ The HTML code is being echoed in PHP and everything seems to be working fine, except that the rupee symbol is not showing up. I've tested using other currency symbols and the ...

phphtml

Switching Styles in React applications

I am currently developing a React application and I have multiple stylesheets to restyle the same elements. For the purpose of this query, let's assume that I have two stylesheets with identical elements but different styles. Presently, in my app, I i ...

cssreactjs

How to Use Jquery to Select a Checkbox within a Table

Within my project, I have a table setup like this: <table id="filter-table" class="table table-striped"> <thead> <tr> <td>Accessory</td> <td>Typology</td> <td>Check</td> < ...

jqueryhtml