Pantalla inicio Adm cupos

pantalla inicio

by BenjamĂ­n Xolotl Torres Luna

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="jumbotron" align="center">
			  <h1 class="display-6">Administraci&oacute;n de grupos</h1><br>
        
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-outline-primary btn-sm">
          <input type="radio" name="plan" id="tec20" autocomplete="off" onclick="displayCampos(1)"> Tec20
        </label>
        <label class="btn  btn-outline-primary btn-sm">
          <input type="radio" name="plan" id="tec21" autocomplete="off" onclick="displayCampos(2)"> Tec21
        </label>
        <label class="btn  btn-outline-primary btn-sm">
          <input type="radio" name="plan" id="life" autocomplete="off" onclick="displayCampos(3)"> Life
        </label>
      </div>
      <br>
      <br>
      <div id="camposTec20" style="display:none">
  <input type="radio" id="Todos" name="administrar" value="Todos">
  <label for="Todos">Todos</label><br>
  <input type="radio" id="Nivel" name="administrar" value="Nivel">
  <label for="Nivel">Nivel</label><br>
  <input type="radio" id="Sede" name="administrar" value="Sede">
  <label for="Sede">Sede</label><br>
  <input type="radio" id="Departamento" name="administrar" value="Departamento">
  <label for="Departamento">Departamento</label><br>
  <input type="radio" id="Paquete" name="administrar" value="Paquete">
  <label for="Paquete">Paquete</label><br>
  <input type="radio" id="Materia o grupo" name="administrar" value="Materia o grupo">
  <label for="Materia o grupo">Materia o grupo</label>
      </div>
       <div...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

function displayCampos(num){
  if(num===1){
    document.getElementById("camposTec20").style.display ="block";
    document.getElementById("camposTec21").style.display ="none";
    document.getElementById("camposLife").style.display ="none";
  }else if(num===2){

    document.getElementById("camposTec20").style.display ="none";
    document.getElementById("camposTec21").style.display ="block";
    document.getElementById("camposLife").style.display ="none";
  }else{
    document.getElementById("camposTec20").style.display ="none";
    document.getElementById("camposTec21").style.display ="none";
    document.getElementById("camposLife").style.display ="block";
  }
  document.getElementById("botonContinuar").style.display ="block";
}