Untitled

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <title>Testing flexbox</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:200,300,400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
  <body>
  <div class="container">
    <form>
      <!-- Dados para o certificado -- Cliente -->
      <label for="certificado"><h3><b>Dados para o certificado</b></h3></label>
      <hr>
      <label for="certificado"><h4><b>Deverá preencher com os dados da pessoa responsável e que deverão constar no certificado energético.</b></h4></label>
      <ul class="flex-outer">
        <li>
          <label for="nome-completo">Nome Completo:</label>
          <input type="text" id="nome-completo" placeholder="Escreva o nome completo">
        </li>
        <li>
          <label for="numero-contrib">NIF:</label>
          <input type="text" id="numero-contrib" placeholder="Escreva o número de contribuinte">
        </li>
        <li>
          <label for="email">Email:</label>
          <input type="email" id="email" placeholder="Escreva o e-mail">
        </li>
        <li>
          <label for="phone">Telefone:</label>
          <input type="tel" id="phone" placeholder="Escreva o numero de telefone">
        </li>
      </ul>
      <ul>
      </ul>

      <!-- Dados para o certificado -- Imovel -->
      <label for="certificado"><h4><b>Deverá preencher com os dados do imóvel que deverão constar no certificado energético.</b></h4></label>

      <ul class="flex-outer">
        <li>
          <label for="morada">Morada:</label>
          <input type="text" id="morada" placeholder="Escreva a morada">
        </li>
        <li>
          <label for="concelho">Concelho:</label>
          <input type="text" id="concelho" placeholder="Escreva o concelho">
        </li>
        <li>
          <label for="codigop">Código Postal:</label>
          <input type="email" id="codigop" placeholder="Escreva o código postal">
        </li>
        <li>
          <label for="freguesia">Freguesia:</label>
          <input type="tel" id="freguesia" placeholder="Escreva a sua freguesia">
        </li>
        <li>
          <label for="localidade">Localidade:</label>
          <input type="text" name="localidade" placeholder="Escreva a sua localidade">
        </li>
        <!-- Update Button -->
        <li>
          <button type="submit">Atualizar</button>
        </li>
      </ul>

      <!-- Dados para facturação -->
      <!-- Opção para esconder se os dados forem os mesmos do cliente -->

      <label for="certificado"><h3><b>Dados para facturação</b></h3></label>
      <hr>

      <h4>Dados de facturação diferentes dos dados de cliente</h4>

        <ul class="flex-outer">
          <li>
            <label for="nome-completo">Nome Completo:</label>
            <input type="text" id="nome-completo" placeholder="Escreva o nome completo">
          </li>
          <li>
            <label for="numero-contrib">NIF:</label>
            <input type="text" id="numero-contrib" placeholder="Escreva o número de contribuinte">
          </li>
          <li>
            <label for="morada">Morada:</label>
            <input type="text" id="morada" placeholder="Escreva a morada">
          </li>
          <li>
            <label for="codigop">Código Postal:</label>
            <input type="email" id="codigop" placeholder="Escreva o código postal">
          </li>
          <li>
            <label for="localidade">Localidade:</label>
            <input type="text" name="localidade" placeholder="Escreva a sua localidade">
          </li>

        </ul>
        <ul>
        </ul>

<!-- Trying out stuff -->

<div>
 Os mesmos da Facturação<input type="checkbox">
      <span >
        <ul class="flex-outer">

         <li>
        <label for="nome-completo">Nome Completo:</label>
        <input type="text" id="nome-completo" placeholder="Escreva o nome completo">
      </li>
      <li>
        <label for="numero-contrib">NIF:</label>
        <input type="text" id="numero-contrib" placeholder="Escreva o número de contribuinte">
      </li>
      <li>
        <label for="morada">Morada:</label>
        <input type="text" id="morada" placeholder="Escreva a morada">
      </li>
      <li>
        <label for="codigop">Código Postal:</label>
        <input type="email" id="codigop" placeholder="Escreva o código postal">
      </li>
      <li>
        <label for="localidade">Localidade:</label>
        <input type="text" name="localidade" placeholder="Escreva a sua localidade">
      </li>
      </ul>
      </span>

 </div>


    </form>
  </div>

  <script src="/js/jquery.js"></script>
    <script type="text/javaScript">
        $(function() {
            $('input[type="checkbox"]').on('change', function() {
                $(this).closest('div').find('.flex-outer').toggle(!this.checked);
            });
        });
    </script>


  </body>
</html>