How can JavaScript be used to show a hidden element when a checkbox is selected?

Question

How can JavaScript be used to show a hidden element when a checkbox is selected?

I'm having trouble with a form on my website that has a dropdown box initially hidden using CSS (display: none;). I want to make this dropdown visible (display: inline;) when a checkbox from another element is checked. Can anyone suggest a solution for this?

Specifically, when #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should have its display property set to inline in CSS. Here's the HTML code: Codepen: http://codepen.io/mizan/pen/yNbqRa

<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
    <input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
    <div id="sc_cf_checkbox_error_1">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
    </div>
</div>
<div class="sc-form-group">
    <select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
        <option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
        <option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
        <option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
    </select>
    <ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
    <input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
    <div id="sc_cf_checkbox_error_2">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
    </div>
</div>
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
    <input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
    <div id="sc_cf_checkbox_error_3">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
    </div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>

javascript jquery html css

Answer 1

Answer №1

After reviewing your code, I made several corrections:

The jQuery library was not loaded in your CodePen project
#specific_project_dropdown was misspelled
You were using $(document).ready() incorrectly
You tried to use .changed(), which is not a valid event - now we are using .click() instead
You were handling the dropdown show/hide functionality incorrectly. Instead of using .next(), you should directly reference it by ID

Here is the updated CodePen project with the corrected code: http://codepen.io/anon/pen/bdWxVE

Updated JavaScript code:

$(document).ready(function() {
    $('#Give_to_a_specific_Project').click(function( event ){
        if ($(this).is(':checked')) {
            $('#choose_a_specific_project_from_dropdown').show();    
        }
        else {
          $('#choose_a_specific_project_from_dropdown').hide();    
        }
    });
});

Answer 2

After reviewing your code, I made several corrections:

The jQuery library was not loaded in your CodePen project
#specific_project_dropdown was misspelled
You were using $(document).ready() incorrectly
You tried to use .changed(), which is not a valid event - now we are using .click() instead
You were handling the dropdown show/hide functionality incorrectly. Instead of using .next(), you should directly reference it by ID

Here is the updated CodePen project with the corrected code: http://codepen.io/anon/pen/bdWxVE

Updated JavaScript code:

$(document).ready(function() {
    $('#Give_to_a_specific_Project').click(function( event ){
        if ($(this).is(':checked')) {
            $('#choose_a_specific_project_from_dropdown').show();    
        }
        else {
          $('#choose_a_specific_project_from_dropdown').hide();    
        }
    });
});

Answer 3

Answer №2

To trigger the display of the select box, utilize the onchange event of the checkbox. Verify within the onchange function whether the checkbox is checked; if it is, then reveal the select box.

Answer 4

To trigger the display of the select box, utilize the onchange event of the checkbox. Verify within the onchange function whether the checkbox is checked; if it is, then reveal the select box.

Answer 5

Answer №3

If you have correctly understood the query, accomplishing this task can be done using only CSS, without the need for JavaScript or jQuery. I have created a demonstration for you. Simply click on the [+] symbol to reveal the hidden text.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toggle Visibility with CSS</title>
  <style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}

/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
  </style>
</head>

<body>
<input type="checkbox" id="hide">
  <label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>

Answer 6

If you have correctly understood the query, accomplishing this task can be done using only CSS, without the need for JavaScript or jQuery. I have created a demonstration for you. Simply click on the [+] symbol to reveal the hidden text.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toggle Visibility with CSS</title>
  <style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}

/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
  </style>
</head>

<body>
<input type="checkbox" id="hide">
  <label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>

How can JavaScript be used to show a hidden element when a checkbox is selected?

Answer №1

Answer №2

Answer №3

Similar questions

Looking to Add Dynamic Website Embed Link?

Issues accessing my Facebook account due to domain problems

Implementing a Flexible YouTube Video Display with API Integration

Stop users from repeating an action

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Tips for aligning an icon at the center of a navigation bar using Bootstrap

Tips for creating a see-through scrollbar in React?

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

Tips for Successfully Sending Vue Data in Axios POST Call

Utilize CSS to specifically target the image source within a button and swap it with a different image in the Woocommerce Wishlist Plugin on your Wordpress

issues arise with the website background when inserting an SVG image onto the page

Trouble in Bootstrap design arises when adding extra space causing layout to break

How to effectively trigger a function to load images in React

Personalize the Facebook like button to suit your preferences

A guide to extracting iFrame information (specifically the referring URL) using JavaScript

Closure-compiler and its peculiar pre-codeyntax

Displaying BlockUI Growl notifications at the bottom right using Jquery

Function that transposes two strings from top to bottom instead of left to right within an array

Can a single character within a span be located and customized using only CSS techniques?

Setting up Raycasting in React-three-fiber: A Guide