In JavaScript, what's the best way to conceal options that have not been clicked on? Can this be achieved by setting their display property

<div class="payment-method">

<div class="method-menu" id="method1">
<input type="radio" name="payment-method" value="credit-card">
<img src="images/credit.png" width="45" height="45" alt=""/><div class="method-text"></div></div>

<div class="method-menu" id="method2">
<input type="radio" name="payment-method" value="convenience-store">
<img src="images/convenience.jpg" width="125" height="35" alt=""/><div class="method-text"></div></div>

<div class="method-menu" id="method3">
<input type="radio" name="payment-method" value="atm">
<img src="images/atm.png" width="45" height="45" alt=""/><div class="method-text"></div></div>

</div>

Any tips on how to select only one option and hide the others? I'm new to this and struggling to figure it out Thank you for your help!

javascriptjquerycss

Answer №1

To hide an element, you can utilize the hide function. Alternatively, you can use .not to exclude the currently clicked element.

$('.pay-way-menu').not(this).hide();

Here is a demonstration:

$('.pay-way-menu').on('click', function(){
  $('.pay-way-menu').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="pay-way">

  <div class="pay-way-menu" id="pay1">
    <input type="radio" name="pay-way" value="credit">
    <img src="images/credit.png" width="45" height="45" alt="" />
    <div class="pay-word"></div>
  </div>

  <div class="pay-way-menu" id="pay2">
    <input type="radio" name="pay-way" value="convenience">
    <img src="images/convenience.jpg" width="125" height="35" alt="" />
    <div class="pay-word"></div>
  </div>

  <div class="pay-way-menu" id="pay3">
    <input type="radio" name="pay-way" value="atm">
    <img src="images/atm.png" width="45" height="45" alt="" />
    <div class="pay-word"></div>
  </div>
</div>

Source

Answer №2

If you utilize jQuery, there are some possibilities open to you:

$(document).ready(function () {
    // Add a click event listener to all pay-way-menus
    $(document).on("click", ".pay-way-menu", function() {
       // Hide all menus
       $('.pay-way-menu').hide();

       // Display the clicked menu
       $(this).show();
    });
});

Keep in mind, however, that you'll need to consider how users can change their selection if needed.

Answer №3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $(document).on("click", ".pay-way-menu", function() {
       // hide all elements except this one
       $('.pay-way-menu').not(this).hide();
    });
});
</script>
</head>
<body>
<div class="payment-methods">

<div class="pay-way-menu" id="pay1">
<input type="radio" name="payment-method" value="credit-card">
<img src="images/credit-card.png" width="45" height="45" alt=""/><div class="payment-label"></div></div>

<div class="pay-way-menu" id="pay2">
<input type="radio" name="payment-method" value="convenience-store">
<img src="images/convenience-store.jpg" width="125" height="35" alt=""/><div class="payment-label"></div></div>

<div class="pay-way-menu" id="pay3">
<input type="radio" name="payment-method" value="atm">
<img src="images/atm.png" width="45" height="45" alt=""/><div class="payment-label"></div></div>

</div>

</body>
</html>

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

Refine JSON results by using various criteria

I am currently working on developing a Google Maps filter that can extract locations from my JSON file based on multiple criteria. My goal is to eventually add more filter fields to enable users to search for specific locations on the map. Although I have ...

javascriptjqueryjsongoogle-mapsfilter

The jQuery.ajax converter function is not being triggered

I'm struggling with jQuery.ajax converters - my converter function isn't triggering. This is the simplified jQuery AJAX code I'm using: $.ajax({ url: "http://myurl/myservice", dataType: "JSONP", cache: false, success: ...

javascriptjsonjqueryjsonp

Nextjs Version 13: Implementing a Loading UI for Search Parameter Changes

I am working on a component that handles user input and updates search parameters accordingly. This results in a page refresh to display updated data on the UI. However, despite these actions, the loading.tsx file for this route is not being triggered. Af ...

javascriptnext.jsnavigationnext.js13urlsearchparams

Type property is necessary for all actions to be identified

My issue seems to be related to the error message "Actions must have a type property". It appears that the problem lies with my RegisterSuccess action, but after searching on SO, I discovered that it could be due to how I am invoking it. I've tried so ...

javascriptangulartypescriptngrx

"Upon successful completion of a jQuery AJAX POST request, data is

Could you help me troubleshoot my code? I can't seem to retrieve my data. Thank you. Index.php <script type="text/javascript> jQuery(document).ready(function(){ $(".click").click(function(){ var value = $(this).val();// sendin ...

jqueryajaxpost

Unable to detect POST action in Firebug or Chrome browser

When I check Firebug or Chrome's development tool, I can't seem to detect a POST ajax request being made. The strange thing is that while I can't see the output of console.log(data) inside the success in Firebug, it does show up in Chrome. ...

javascriptajaxangularjs

showing <li> elements on both the left and right sides based on the specified condition

I am struggling to show messages one by one using the 'li' tag, with the intention of having our messages appear on the right side and others on the left side in a react Chat app. However, the issue arises when I attempt to use float left or floa ...

htmlcssreactjsbootstrap-4

Enhancing Your Navbar Brand with Images using Flexbox and Bootstrap

I've been working on a project where I decided to customize the Bootstrap navbar by breaking it up into flexboxes in order to align everything according to the specifications. However, I've encountered an issue while trying to place a logo in the ...

htmltwitter-bootstrapcss

Learn how to navigate to a different page in vuetify after a successful password validation

To direct the user to the "customers" page only if the password entered in this form is correct, display an error message otherwise. <v-card-text> <v-form> <v-text-field id="password" label= ...

javascriptvue.jsvuetify.js

Choosing HTML Elements for Audio Playback in HTML5: A Guide to Selecting Elements Without Using Div IDs

When creating an HTML5 player, I am transitioning "from using divs with id's" to "simple HTML elements". Former Scenario (functional) <audio src="track1.mp3" id="audio"></audio> <controls> <play id="play" style="display:none ...

javascripthtmlhtml5-audiocode-cleanupgetelementsbyname

Using ng-value does not trigger any updates to the Ng-model

After setting the input value Array property sum, it displays the value in the input field. However, when submitting the form, the Quantity property is not being received in the Order object. I noticed that if I change the value manually, then the Quanti ...

javascriptangularjs

Modify form content by utilizing a VueJS method

Currently, I am utilizing VueJS and facing a challenge with a form that consists of two fields. The first field requires user input, while the second field should calculate its value by passing the input from the first field through a method. HTML <di ...

javascriptvue.jsvuejs2

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

cssajaxsymfonymodal-dialogmaterialize

Responsive height using Material Design Lite

I have a website using MDL, with a prominent header centered on the page. To enhance visibility, I added a background box behind the text. To view the CodePen example, click here. The challenge is to ensure that when the window is resized, such as on a m ...

htmlcssresponsive-designheightmaterial-design-lite

Sort the data by clicking on the table header

I have implemented a form on my website that allows users to order a table of data by selecting a column of their choice. The HTML code for this form is as follows: <form action="" method="post> <select name="orderby"> <option v ...

javascriptphpjqueryhtml-table

Resource Jump.js could not be loaded

Although I am still new to NPM, I have mostly built websites without using it. Recently, I decided to implement smooth scroll using Jump.js. Initially, everything seemed to work well when I used the live server extension in VScode. However, once I uploade ...

javascriptgithubnpmgithub-pagesnpm-scripts

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

Employing a lexicon of hexadecimal color code values to harmonize CSS styles

I have a unique requirement where I need to utilize a dictionary of HTML color codes and then apply those colors as styles. It's an interesting challenge! Here is an example of how my color dictionary looks like: const colorCodes = { red: ...

javascripthtmlcssreactjs

The combination of Angular Hottowel's 'blocks.exception' and 'blocks.router' prevents the App from being displayed in the browser

After delving into Angular's fundamentals a couple of months back, I am now venturing into building a practice app that mirrors industry standards. I recently completed John Papa's Play by Play and Clean Code courses on Pluralsight, which furthe ...

javascriptangularjshottowel

Incorporate new class into preexisting modules from external library

I am currently working on expanding Phaser by incorporating a new module called Phaser.Physics.Box2D. While Phaser already utilizes this module internally, it is an additional plugin and I am determined to create my own version. TypeScript is the language ...

javascripttypescriptphaser-framework