title: Hide and Show field set
body: <p>i want to hide/show field set with a toggle. But it won't work! Can someone please help me? I don't know what's wrong in my code and i want to toggle it. The last two field sets have to hide and have to be enabled by clicking on the radio buttons.</p>
  
  <pre><code>    &lt;section&gt;
          &lt;h1&gt;Aanmelden&lt;/h1&gt;
            &lt;p&gt;Bent u geïnteresseerd in samenwerken met CMD Amsterdam? Dat kan!Tijdens de opleiding werken studenten aan projecten voor echte opdrachtgevers.Ook lopen de studenten stage, in het tweede en afstudeerjaar.
  
            &lt;em&gt;CMD Amsterdam zoekt altijd naar positieve verbindingen met de creatieve stad Amsterdam.&lt;/em&gt;
  
            Voor het aanmelden van stageplekken of projecten kunt u onderstaand formulier invullen Wij nemen zo nodig contact met u op nadat het formulier is verstuurd. Voor vragen of opmerkingen kunt u &lt;a href="contact.html"&gt;contact&lt;/a&gt; met ons op.
            &lt;/p&gt;
      &lt;/section&gt;
      &lt;form&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Contactgegevens&lt;/legend&gt;
              &lt;label for="Naam"&gt;Naam&lt;/label&gt;
              &lt;input id="Naam" type="text" required/&gt;
              &lt;label for="Bedrijf"&gt;Bedrijf&lt;/label&gt;
              &lt;input id="Bedrijf" type="text" required/&gt;
              &lt;label for="Adres"&gt;Adres&lt;/label&gt;
              &lt;input id="Adres" type="text" required/&gt;
              &lt;label for="Postcode"&gt;Postcode&lt;/label&gt;
              &lt;input id="Postcode" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" required/&gt;
              &lt;label for="Plaats"&gt;Plaats&lt;/label&gt;
              &lt;input id="Plaats" type="text" required/&gt;
              &lt;label for="Telefoon"&gt;Telefoon&lt;/label&gt;
              &lt;input id="Telefoon" type="text" required/&gt;
              &lt;label for="Email"&gt;Email&lt;/label&gt;
              &lt;input id="Email" type="text" required/&gt;
  
              Ik wil mijn aanmelden:
              &lt;input id="Project" type="radio" required/&gt;
              &lt;label for="Project"&gt;Voor een project&lt;/label&gt;
              &lt;input id="Stage" type="radio" required/&gt;
              &lt;label for="Stage"&gt;Als stagebedrijf&lt;/label&gt;
          &lt;/fieldset&gt;
          &lt;fieldset &gt;
              &lt;legend&gt;Project&lt;/legend&gt;
              &lt;label for="Titel"&gt;Titel&lt;/label&gt;
              &lt;input id="Titel" type="text"/&gt;
              &lt;label for="Opdrachtomschrijving"&gt;Opdrachtomschrijving&lt;/label&gt;
              &lt;input id="Opdrachtomschrijving" type="text"/&gt;
              &lt;label for="Doelgroepomschrijving"&gt;Doelgroepomschrijving&lt;/label&gt;
              &lt;input id="Doelgroepomschrijving" type="text"/&gt;
              &lt;label for="Doelstelling"&gt;Doelstelling / intentie van het project&lt;/label&gt;
              &lt;input id="Doelstelling" type="text"/&gt;
              &lt;label for="Looptijd"&gt;Looptijd (maximaal 24 maanden)&lt;/label&gt;
              &lt;input id="Looptijd" type="range" min="1" max="24"/&gt;
              &lt;label for="Deadline"&gt;Deadline&lt;/label&gt;
              &lt;input id="Deadline" type="date"/&gt;
              Geschikt voor
              &lt;input id="eerstejaars" type="radio"/&gt;
              &lt;label for="eerstejaars"&gt;Eerstejaars studenten&lt;/label&gt;
              &lt;input id="tweedejaars" type="radio"/&gt;
              &lt;label for="tweedejaars"&gt;Tweedejaars studenten&lt;/label&gt;
              &lt;input id="derdejaars" type="radio"/&gt;
              &lt;label for="derdejaars"&gt;Derdejaars studenten&lt;/label&gt;
              &lt;input id="afstudeer" type="radio"/&gt;
              &lt;label for="afstudeer"&gt;Afstudeer studenten&lt;/label&gt;
              &lt;input id="onbekend" type="radio"/&gt;
              &lt;label for="onbekend"&gt;Onbekend&lt;/label&gt;
              Opmerkingen?
              &lt;input id="opmerkingen" type="text"/&gt;
          &lt;/fieldset&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Stage&lt;/legend&gt;
              Geschikt voor:
              &lt;input id="tweedestage" type="radio"/&gt;
              &lt;label for="tweedestage"&gt;Tweedejaars studenten&lt;/label&gt;
              &lt;input id="afstudeerders" type="radio"/&gt;
              &lt;label for="afstudeerders"&gt;Afstudeer studenten&lt;/label&gt;
              &lt;input id="nietbekend" type="radio"/&gt;
              &lt;label for="nietbekend"&gt;Onbekend&lt;/label&gt;
  
              Hoe lang is de stage?
              &lt;input id="tien" type="radio"/&gt;
              &lt;label for="tien"&gt;Tien weken&lt;/label&gt;
  
              &lt;input id="twintig" type="radio"/&gt;
              &lt;label for="twintig"&gt;Twintig weken&lt;/label&gt;
              &lt;input id="unknown" type="radio"/&gt;
              &lt;label for="unknown"&gt;Onbekend&lt;/label&gt;
              &lt;label for="begindatum"&gt;Begindatum&lt;/label&gt;
              &lt;input id="begindatum" type="date"/&gt;
              &lt;label for="werkzaamheden"&gt;Beschrijving werkzaamheden&lt;/label&gt;
              &lt;input id="werkzaamheden" type="text"/&gt;
              Beschrijving stagebedrijf
              &lt;label for="bedrijfsnaam"&gt;Bedrijfsnaam&lt;/label&gt;
              &lt;input id="bedrijfsnaam" type="text" required/&gt;
              &lt;label for="address"&gt;Adres&lt;/label&gt;
              &lt;input id="address" type="text" autocomplete="off"/&gt;
              &lt;label for="zip"&gt;Postcode&lt;/label&gt;
              &lt;input id="zip" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}
               "/&gt;
              &lt;label for="woonplaats"&gt;Plaats&lt;/label&gt;
              &lt;input id="woonplaats" type="text" required/&gt;
              &lt;label for="sector"&gt;Sector&lt;/label&gt;
              &lt;input id="sector" type="text"/&gt;
              &lt;label for="core"&gt;Core Business&lt;/label&gt;
              &lt;input id="core" type="text"/&gt;
              Opmerkingen?
              &lt;input id="opmerking" type="text"/&gt;
          &lt;/fieldset&gt;
          &lt;input id="verzenden" type="submit"/&gt;
   &lt;/form&gt;
  
  
  &lt;/body&gt;
  
  
  
  body{
     background: #efefef;
    min-height: 100%;
    font: 100%/1.5 helvetica, arial;
     } 
  
  label {
  display: block;
  margin: 0 0 1em;
  }
  label &gt; input {
  display: block;
  }
  
  input[type="radio"] + label{
     display: inline;
  }
  
   input, button {
    font: inherit;
  }
  fieldset{
     background: linear-gradient(45deg, #fff, lime);
   }
  
    .is-invisible{
     display: none;
  }
    .is-visible {
      display: block;
    }
  </code></pre>
  
  <p>JAVASCRIPT: </p>
  
  <pre><code>   var fieldset = document.querySelector('fieldset:nth-of-type(2,3)');
  
    fieldset.classlist.add('hidefieldset');
  
    document.querySelector('input[type="radio"]').onclick = function() {
    fieldset.classList.add('showfieldset');
  }
  
    document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
  fieldset.classlist.remove('showfieldset');
  }
  </code></pre>
  
  <p>Thanks for helping xx</p>