Interactive Rating

Community feedback

• 

  Davina Leong•440

  @davinaleongPosted over 2 years ago

  Hi, instead of buttons, I suggest using radio buttons since they already have the ability to deselect the other choices when one choice is selected when they share the same name attribute.

  Link the radio buttons to the labels via the for attribute. Hide the radio buttons and style the labels.

  To style checked labels, you can to this:

  input[type=radio]:checked + label { ... }

  This will select the label immediately after the radio input.

  ---

  For toggling the different views, I prefer to use data attributes as opposed to classes.

  E.g. HTML: <section class="thanks" data-open>...</section>

  Then you select the element like this in CSS:

  .thank-you-section {
    display: none;
  }
  
  .thank-you-section[data-open] {
    display: block;
  }
  

  Then in your JavaScript, you can do this: thanks.setAttribute("data-open", true);

  Marked as helpful

  1