js. how to hide the options that aren't onclick ? need to be like display:none

Question

<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>

How to click only one and hide other options? I just start learning and really no ideas about this Thank you so much

Welcome to SO! Please refer [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) and provide necesary details — Rajesh, Oct 03 '16 at 06:29
Sorry for those unclear details,I will correct and learn as soon as possible Thank you! — sylvia, Oct 03 '16 at 06:36
its alright. You can refer following posts as reference: [Hide element](http://stackoverflow.com/questions/5375449/how-to-hide-a-div-with-jquery) or [show/hide elements](http://stackoverflow.com/questions/10310717/toggle-show-hide-on-click-with-jquery) — Rajesh, Oct 03 '16 at 07:59

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You can use hide to hide element. You can also use .not to ignore current clicked element.

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

Following is a sample for same:

$('.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>

Reference

score 0 · Answer 2 · answered Oct 03 '16 at 06:30

Using jQuery you can do the following:

$(document).ready(function () {
    // attach click handler to all pay-way-menu
    $(document).on("click", ".pay-way-menu", function() {
       // hide all
       $('.pay-way-menu').hide();

       // show this
       $(this).show();
    });
});

However, you need to think about how you are going to allow users to change their minds.

score 0 · Answer 3 · answered Oct 03 '16 at 09:52

<!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 expect thie current one
       $('.pay-way-menu').not(this).hide();
    });
});
</script>
</head>
<body>
<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>

</body>
</html>

js. how to hide the options that aren't onclick ? need to be like display:none

3 Answers3

Reference