How to make radio button inside radio button work?

I have the following JsFiddle code. The radio buttons concept works fine except for Move Contents option where I have coupe of radio buttons inside a Move Contents radio button and I want to display their select options when Tier I Move or Tier II Move is clicked.

1 Like

(Preface: this post is made at 4:45 in the morning. M’not awake. More effort may be dedicated later.)

Your Javascript is working fine. The CSS is being overridden because (if you believe it) you define subtier2-options’ CSS after shown’s.

Move shown’s CSS entry to the bottom of the list, and it’ll all work.

Something something CSS applied to class names at equal level get applied in the order in the file, so defining a class level css instruction has to be done in the order you want things to override.

2 Likes

No need to duplicate code either if they are the same property values in each.

   .tier2-options,
    .subtier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    .shown{
      display: block;
    }
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.