- 1 year ago 49
Javascript Question

How to append correct details based upon category?

If a user clicks on

then the details
appear, if the user clicks on
then the details

<%= f.radio_button :category, 'goal', class: 'date-format-switcher' %>
<label for="challenge_category_goal">Goal</label>

<%= f.radio_button :category, 'habit', class: 'date-format-switcher' %>
<label for="challenge_category_habit">Habit</label>

<div id='details'>
<div id='for-goal'>
goal attributes
<div id='for-habit'>
habit attributes

var removed = $('#for-b').detach();
$('#challenge_category_goal').click(function() {
removed = $('#for-goal').detach();

$('#challenge_category_habit').click(function() {
removed = $('#for-habit').detach();

When the form first loads the appropriate category is chosen (based upon code passed on the backend from the user choosing a featured challenge), but the
are not changed based upon page load. They only change based upon
. How can I make javascript show correct
based upon page load &

Answer Source

You can try to use the checked status to determine the show/hide status:

function updateInfo(){

$(function() {

I also suggest you to check whether this pure CSS method fits your case.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download