If this is checked and/or this is checked

by akmiecik

HTML

<div id="ride_data">
<form method="POST" id="myForm" action="https://alank.net/bike-reply-3/" autocomplete="off" name="myForm">

<div id="split_button">Show splits:<input type="checkbox" id="splits" onclick="toggle_splits()" name="splits" value="0" data-type="horizontal"></div>
<div id="split_section" style="visibility: visible;">
<hr>
<div class="title a">Cumulative Average</div>
<p></p>
<div id="average_inputs_grid">
<div for="split_1" class="box five"><span>5</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_split_5" class="split" name="bike_split_5" step=".01" value="">
</div>
<div for="split_2" class="box ten"><span>10</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_split_10" class="split" name="bike_split_10" step=".01" value="">
</div>
<div for="split_3" class="box fifteen"><span>15</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_split_15" class="split" name="bike_split_15" step=".01" value="">
</div>
<div for="split_4" class="box twenty"><span>20</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_split_20" class="split" name="bike_split_20" step=".01" value="">
</div>
<div for="split_last" class="box last"><span>Last</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_split_last" class="split" name="bike_split_last" step=".01" value="">
</div>
</div>
<div id="row_3">
<div class="last_split_miles">Last split miles:&nbsp;&nbsp;<input pattern="[0-9]*" type="number" inputmode="decimal" id="last_split_miles" class="split" name="last_split" step=".01" value=""></div>
<div class="title b">Split Average</div>
<p></p>
<div id="average_split_grid">
<div for="split_ave_5" class="box five visibility"><span>5</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split_ave_5" class="split" name="split_ave_5" step=".01" value="">
</div>
<div for="split_ave_10" class="box ten"><span>10</span><br>
<input...

CSS

#ride_data {width: 350px;}
div#row_5 {
    position: relative;
    top: 10px;
    text-align: center;
    left: 0vw;
    background: transparent;
    
}
#conditions, #split_section {
    display: none;
    position: relative;
}
#split_section {
  background: #070700;
}
#conditions {
  position: relative;
  top: 10px;
  left: 10px;
}
.wrapper_conditions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}
.box2 .temp{ grid-area: 1 / 1 / 2 / 2; }
.box2 .wind-direction { grid-area: 1 / 2 / 2 / 3; }
.box2 .wind_speed { grid-area: 2 / 1 / 3 / 2; }
.box2 .wind_gust { grid-area: 2 / 2 / 3 / 3; }
button#submit {
    padding: 5px 40px;
    position: relative;
    left: 69px;
}

JavaScript

toggle_splits = function()  {
      
if (document.getElementById('splits').checked) {
		document.getElementById('split_section').style.display = 'block';
		document.getElementById('row_5').style.background = 'blue';
	} else {
  	document.getElementById('split_section').style.display = 'none';
		document.getElementById('row_5').style.background = 'red';
  }
}
toggle_conditions = function()  {
      
if (document.getElementById('out').checked) {
		document.getElementById('conditions').style.display = 'block';
		document.getElementById('row_5').style.background = 'green';
	} else {
  	document.getElementById('conditions').style.display = 'none';
		document.getElementById('row_5').style.background = 'gray';
  }
}