jQuery hidden div doesn't show again with on change event

Related searches

        
<div class="waive_admin_fee">
    <label class="label">Waive admin fee?</label>
    <div>
        <div class="select">
            <select name="waive_admin" required>
                <option value="no">No</option>
                <option value="yes">Yes</option>
            </select>
        </div>
    </div>
</div>
<div class="remaining_payments">
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fa fa-money"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="payments">
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="p_option" id="custom" value="custom" required>
</div>

Using change event on Select element means the currently selected value has to change. When there are 2 options, this only happens when the other option is selected. Consider the following example.

$(function() {
  $("#total").on("change", function() {
    if ($(this).val() == 'Yes') {
      $(this).parent().next(".pay-info").hide();
    } else {
      $(this).parent().next(".pay-info").show();
    }
  });
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="label" for="">Total Balance Paid </label>
  <div class="select">
    <select name="total" id="total">
      <option></option>
      <option value="No">No</option>
      <option value="Yes">Yes</option>
    </select>
  </div>
  <div style="display: none;" class="pay-info">
    <div class="waive_admin_fee">
      <label class="label">Waive admin fee?</label>
      <div>
        <div class="select">
          <select name="waive_admin" required>
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select>
        </div>
      </div>
    </div>
    <div class="remaining_payments">
      <label class="label">Remaining Payments</label>
      <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fas fa-dollar-sign"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
      </div>
    </div>
    <div id="payments">
      <label class="label">Monthly</label>
      <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
      <label class="label">Customized</label>
      <input type="radio" name="payment_option" id="custom" value="custom" required>
    </div>
  </div>
</div>

:hidden Selector, Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element,� The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value.


Probably your problem is that you have malformed selectors. You should not have commas in selectors. I.e. $("#payments,.waive_admin_fee,.remaining_payments").

Here's a working example:

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div>
    <label class="label" for="">Total Balance Paid </label>
    <div>
      <div class="select">
        <select name="total" id="total">
          <option value="No">No</option>
          <option value="Yes">Yes</option>
        </select>
      </div>
    </div>
 </div>

 <div id="payments">
  <div class="waive_admin_fee">
    <div class="remaining_payments">
  hide me
    </div>
  </div>
 </div>

<script>
  $(document).ready(function() {
    $("select[name=total]").on("change", function() {
        if($("select[name=total]").val() == 'Yes') {
          $("#payments .waive_admin_fee .remaining_payments").hide();
        } else {
            $("#payments .waive_admin_fee .remaining_payments").show();
        }
    });
});
</script>

</body>
</html>

.hide(), If an element has a display value of inline and is hidden then shown, it will once again be displayed inline . When a duration, a plain object, or a "complete"� In this example, I will use toggle jQuery method to show or hide a div element. As you click on the button “Show/Hide” if the div element was visible it will be hidden and vice versa. See online demo and code. In the click event of the button, I placed jQuery toggle method which is attached to a div element with id: toggle_tst. See the


You can try this for html. I think at first you must be having multiple selector keeping them without space.

<div>
        <label class="label" for="">Total Balance Paid </label>
        <div>
            <div class="select">
                <select name="total" id="total">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
    </div>

   <div class="helo"> // define class here
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
        <i class="fa fa-money"></i>
    </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="test"> // define id here.
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="payment_option" id="custom" value="custom" required>
</div>

In Jquery

$(document).ready(function () {
    $("select[name=total]").on("change", function () {
        if ($(this).val() === 'Yes') {
            $('#test, .helo').show();
        } else {
            $('#test, .helo').hide();
        }
    });
});

Hope this work for you.

Jquery not working, I have a div called #overlay that is currently hidden. It covers the whole page and has a form inside. I want to make it visible when a button on� The jQuery $( ) function is the main jQuery function called for most jQuery operations. The string that is passed to $( ), in this example “DIVtarget”, is called a selector. It tells the $( ) function to search through the Document Object Model (DOM) for any objects that match the provided selector – here a DIV with “DIVtarget” as an ID.


.show(), If an element has a display value of inline , then is hidden and shown, it will once again be displayed inline . Note: If using !important in your styles, such as� you don't have to use div#id selectors, #id is enough because it should be unique in your page, moreover that way after jquery will use findElementById javascript function it will not have to perform additional check for div.


Places it's tempting to use `display: none;`, but don't, By applying that class to an element you've immediately made that content “ inaccessible” by screen For instance in jQuery, after you . Just because a panel of content isn't the “currently active” one doesn't mean it should be inaccessible. How can I find out if a certain element has another element as a child? And if it doesn't, append a new one to it and then return it. I tried it with: var myel = ($('&gt; div.my', this).length &g


Because :hidden is a jQuery extension and not part of the CSS specification, queries using :hidden cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :hidden to select elements, first select the elements using a pure CSS selector, then use .filter