diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 26e72eea..568f2c45 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -287,6 +287,22 @@ function on_short_range_option_change() {
   })
 }
 
+function on_coffee_break_option_change() {
+  all_coffee_breaks = [$('input[type=radio][name=exposed_coffee_break_option]'), $('input[type=radio][name=infected_coffee_break_option]')];
+  for (coffee_breaks of all_coffee_breaks) {
+    coffee_breaks.each(function() {
+      children = getChildElement($(this));
+      if (this.checked && children.length) {
+        children.show();
+        return false;
+      }
+      else {
+        children.hide();
+      }
+    })
+  }
+}
+
 /* -------UI------- */
 
 function show_disclaimer() {
@@ -743,6 +759,13 @@ $(document).ready(function () {
   // Call the function now to handle forward/back button presses in the browser.
   on_short_range_option_change();
 
+  // When the coffee_break_option changes we want to make its respective
+  // children show/hide
+  $("input[type=radio][name=exposed_coffee_break_option]").change(on_coffee_break_option_change);
+  $("input[type=radio][name=infected_coffee_break_option]").change(on_coffee_break_option_change);
+  // Call the function now to handle forward/back button presses in the browser.
+  on_coffee_break_option_change();
+
   // Setup the maximum number of people at page load (to handle back/forward),
   // and update it when total people is changed.
   setMaxInfectedPeople();
diff --git a/cara/apps/templates/base/calculator.form.html.j2 b/cara/apps/templates/base/calculator.form.html.j2
index 3b494d0f..78d0114f 100644
--- a/cara/apps/templates/base/calculator.form.html.j2
+++ b/cara/apps/templates/base/calculator.form.html.j2
@@ -476,25 +476,27 @@
         </div>
         <div>
         <input type="radio" id="exposed_coffee_break_0" name="exposed_coffee_break_option" value="coffee_break_0" checked="checked">
-          <label for="exposed_coffee_break_0" >No breaks</label>
-        <input class="ml-2" type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2">
+          <label for="exposed_coffee_break_0">No breaks</label>
+        <input class="ml-2" type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2" data-enables="#DIVexposed_breaks_duration">
           <label for="exposed_coffee_break_2">2</label>
-        <input class="ml-2" type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4">
+        <input class="ml-2" type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4" data-enables="#DIVexposed_breaks_duration">
           <label for="exposed_coffee_break_4">4</label><br>
         </div>
         </div>
 
         <br>
 
-        Duration (minutes):
-        <select id="exposed_coffee_duration" name="exposed_coffee_duration">
-          <option value="5">5</option>
-          <option value="10">10</option>
-          <option value="15">15</option>
-          <option value="20">20</option>
-          <option value="25">25</option>
-          <option value="30">30</option>
-        </select><br>
+        <div id="DIVexposed_breaks_duration" style="display:none">
+          Duration (minutes):
+          <select id="exposed_coffee_duration" name="exposed_coffee_duration">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
+            <option value="30">30</option>
+          </select><br>
+        </div>
       </div>
       <br>
     </div>
@@ -525,17 +527,18 @@
         <div>
         <input type="radio" id="infected_coffee_break_0" name="infected_coffee_break_option" value="coffee_break_0" checked="checked">
           <label for="infected_coffee_break_0" >No breaks</label>
-        <input style="ml-2" type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2">
+        <input style="ml-2" type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2" data-enables="#DIVinfected_breaks_duration">
           <label for="infected_coffee_break_2">2</label>
-        <input style="ml-2" type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4">
+        <input style="ml-2" type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4" data-enables="#DIVinfected_breaks_duration">
           <label for="infected_coffee_break_4">4</label><br>
         </div>
         </div>
 
         <br>
 
+        <div id="DIVinfected_breaks_duration" style="display:none">
         Duration (minutes):
-        <select id="infected_coffee_duration" name="infected_coffee_duration">
+        <select id="DIVinfected_coffee_duration" name="infected_coffee_duration">
           <option value="5">5</option>
           <option value="10">10</option>
           <option value="15">15</option>
@@ -543,6 +546,7 @@
           <option value="25">25</option>
           <option value="30">30</option>
         </select><br>
+        </div>
       </div>
       <br>
     </div>