Hide / Show Multiple Divs

Question

I am trying to create a form that has various hide/reveals in it and one of the last parts I need to do to this form is SHOW the payment information fields when only Credit Card is selected.

I have a test page setup here: http://www.faa.net.au/test/femmes-member-form.html

Process so far is:

Enter your details
Select Event Date
Selecting Member + 1 or more Guests ask for payment details
At the moment, I have displayed the 3 DIVs that I want to appear depending on the radio selection made but when I hide these, the code I have in place at present doesn't work.

Can anyone help me here at all please?

If you need the code, please let me know, with a number of different elements involved I didnt want to paste the whole thing on here, hopefully you can see the Source Code?

Here is the Javascript I have at present but not sure if its this that is wrong or if its clashing with something else?

        <script type="text/javascript">
        $(function() {
            $('.cat_dropdown').change(function() {
                $('#payMethod').toggle($(this).val() >= 2);
            });
        });     
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".payOptions").click(function () {
                $(".paymentinfo").hide();
                switch ($(this).val()) {
                    case "Credit Card Authorisation":
                        $("#pay0").show("slow");
                        break;
                    case "Direct Deposit":
                        $("#pay1").show("slow");
                        break;
                    case "Cash Payment (FAA Office)":
                        $("#pay2").show("slow");
                        break;
                }
            });
        });
    </script>

Please add the code that you have tried so far. This is not a site where you hire developers to do the work for you (as you don't pay anyone). This a community that helps you with code. We don't build complete code for you to use. — aBhijit, Jul 19 '13 at 07:08

score 1 · Accepted Answer · answered Jul 19 '13 at 07:10

1

As per viewing code from View Souce and guessing that you have not added correct class in event handler. thus click event for radio is not getting invoked.

Change

$(".payOptions").click(function () {

to

$(".paymentmethod").click(function () {

answered Jul 19 '13 at 07:10

Satpal

132,252
13
159
168

Annoying when something so simple like that makes all the difference. That worked perfectly, thanks! Sometimes you just need another pair of eyes to look at your code. – sampotts Jul 22 '13 at 00:12
I have applied this update but now that I get the DIVs to appear, whenever I select Credit Card Authorisation and then choose a Card Type, the seems to keep the selection but it actually disappears, same if I choose Number of Tickets first and then choose a date, the payment div disappears. Any ideas?? – sampotts Jul 22 '13 at 02:14

score 0 · Answer 2 · answered Jul 19 '13 at 07:09

0

You have not posted any source, but if you are using jQuery, you can simply do:

$(".commonclass").hide();

Provided that all 3 divs have the "commonclass" class.

answered Jul 19 '13 at 07:09

Ermir

1,391
11
25

aguynamedloren · Answer 3 · 2013-07-19T07:18:20.310

Process goes something like this:

Start clean: hide all payment methods
Your radio inputs have paymentmethod class, so attach a change event listener to those elements
When one of the radios is selected, hide all of the payment methods, determine the one you want to show using index, and show that div

$('#pay0, #pay1, #pay2').hide();

$('input.paymentmethod').on('change', function(){
  $('#pay0, #pay1, #pay2').hide();
  var selected = $('input.paymentmethod').index($('input.paymentmethod:checked'));
  $('#pay'+selected).show();
});

score 0 · Answer 4 · answered Jul 19 '13 at 07:20

Used to jquery as like this

Css

#pay0, #pay1, #pay2{display:none;}

Jquery

$(document).ready(function(){

    $('#payment').change(function(){
        if($('#CAT_Custom_255277_0').attr('checked')){
            $('#pay0').show();
            $('#pay1').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_1').attr('checked')){
            $('#pay1').show();
            $('#pay0').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_2').attr('checked')){
            $('#pay2').show();
            $('#pay0').hide();
            $('#pay1').hide();
        }
    });

});

Demo

Praveen · Answer 5 · 2013-07-22T04:06:45.443

As per my understanding, you're trying like below,

select value from dropdown, if the value !== "1" then show payment radio buttons
Based on the radio button selection, you want to show the respective div

From viewing your source code, it seems you're using jQuery lib and there use this

$(document).ready(function() {
    $('input[type=dropdown]').on('change', function(){
        if($(this).val() !== 1)
            {
                $('input[type=radio]').show();
            }
    }

    $('input[type=radio]').on('change', function(){
        if($(this).val() === "Credit Card Authorisation") {
            $('#pay1').hide();
            $('#pay2').hide();
            $('#pay0').show();
        }
        else if($(this).val() === "Direct Deposit"){
            $('#pay0').hide();
            $('#pay2').hide();
            $('#pay1').show();
        }
        else if($(this).val() === "Cash Payment (FAA Office)"){
            $('#pay0').hide();
            $('#pay1').hide();
            $('#pay2').show();
        }   
    });
});

Hope you understand.

I have tried replacing the code with what you have above but it still doesn't show the payment details when you click on the radio buttons, am I missing something here or do I need to position the code elsewhere or something? — sampotts, Jul 21 '13 at 23:58

Hide / Show Multiple Divs

5 Answers5

Linked