// then get the div ID to show (I stored it in the "value" of the radio button)
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});
});

view, I do see the radio buttons to select either B2C or B2B, but whichever button I select, nothing is displayed below (neither the B2C section nor the B2B section).

What am I missing?

—————

UPDATE 2: So, I updated my code as Ziv Galili's new comment, ie: paying attention to the name of the button group, which is actually

calendar[target_relationship]

.

When I did that, and tried to go to my view, I got a

execJS::RuntimeError

, which made me realize we were using pure JavaScript, while my Rails app seems to be using CoffeeScript.

So, I deleted

app/assets/javascript/custom/calendars.js

, converted Ziv Galili's code to CoffeeScript and added it to app/assets/javascript/calendars.coffee:

$('input[type=radio][name=calendar[target_relationship]]').change ->
# first: hide all the divs
$('#calendar_details_b2c').css 'display', 'none'
$('#calendar_details_b2b').css 'display', 'none'
# then get the div ID to show (i stored it in the "value" of the radio button
fieldToShow = $(this).val()
# now use jQuery selector and change the display setting of that field
$('#' + fieldToShow).css 'display', 'block'
return

I also replaced

//= require_tree ./custom

with

//= require_tree .

to make sure all my

.coffee

files were loaded through

application.js

.

Despite all these code updates, I still do not get the result I am expecting: none of the

div

s are displayed in my views:

I must be missing something really, really obvious, but I can't figure out what it is.

$('input[type=radio][name=calendars]').change(function () {
// first: hide all the divs
$('#calendar_details_b2c').css("display","none");
$('#calendar_details_b2b').css("display","none");
// then get the div ID to show (i stored it in the "value" of the radio button
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});

UPDATE:

as for your update, please pay attention that in the JS section the name of the button group match their name in the HTML file: