JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p>
  Try changing the following option and take a look at the margins of the available radios. What would be the supposed way to handle the margins? The radio element after the checkboxes requires a 'margin-top: -5px' according to the '.checkbox+.checkbox, .radio+.radio' CSS rule but does not seem to get it after the 'additional-options' element gets a 'display: none;'.
</p>
<hr />
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="additional-options" id="additional-options-1">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Option two
    </label>
  </div>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
    Option three
  </label>
</div>

CSS

.additional-options {
  display: none;
  margin-top:-5px;
}
.additional-options + .radio{
  margin-top:-5px;
}

JavaScript

$(document).ready(function() {
	$("#additional-options-1").css("display", "block");
  $("input[type=radio][name=optionsRadios]").change(function() {
    if(this.value == "option1") {
    	$("#additional-options-1").css("display", "block");
    }
    else {
    	$("#additional-options-1").css("display", "none");
    }
  });
});