<form action="" method="post">
    <div class="radio-toolbar">
      <h2>Choose Car</h2>
      
      <input type="radio" name="car" value="850" id="small" checked>
      <label for="small"><h3>Car</h3> <img src="http://cdn.flaticon.com/png/256/27347.png"><h6>850dkk/day</h6></label>
      
      <input type="radio" name="car" value="1150" id="medium">
      <label for="medium"><h3>Van</h3><img src="http://cdn.flaticon.com/png/256/31238.png
      "><h6>1150dkk/day</h6></label>
      
      <input type="radio" name="car" value="1300" id="big">
      <label for="big"><h3>Truck</h3><img src="http://cdn.flaticon.com/png/256/31576.png">
        <h6>1300dkk/day</h6>
      </label>
    
  </div>
  
    <div>
      <h3>From</h3>
      <input type="date" name="start" required><br>
    </div>
    <div>
      <h3>To</h3>
      <input type="date" name="slut" required><br>
    </div>
  
    <div onclick="toggle_div('sectionHide');">Add-on</div>
        
    <div id="sectionHide">
      <h6>Babyseat (50dkk/24timer)<input type="checkbox" name="seat" id="seat" value="50"></h6>
  <h6>GPS (50dkk/24timer)<input type="checkbox" name="gps" id="gps" value="50"></h6>
      <h6>Driver (240dkk/24timer)[indian driver]<input type="checkbox" name="gps" id="gps" value="50"></h6>
    </div>
  
  <div><input type="submit" value="Calculate rent"></div>
</form>

body{
  font-weight:600;
  font-family:arial;
}
/* RADIO STYLE */
img{margin:5px;width:80%;}

.radio-toolbar input[type="radio"] {
    display:none; 
}

.radio-toolbar label {
    display:inline-block;
    background-color:#ffffcc;
    width:98%;
    margin:1%;
    font-family:Arial;
    font-size:16px;
    text-align:center;
    border-radius:4px;
}
.radio-toolbar input[type="radio"]:checked + label { 
  background-color:#3998fc;
  border:1px solid #333;
}
/* RADIO STYLE */

div, input[type=submit]{
  width:360px;
  border-radius:4px;
  border:1px solid #333;
  margin:5px auto;
}
      
div h3{
font-family:sans-serif;
text-transform:uppercase;
  margin-bottom:1%;
}

.radio-toolbar label{
  margin:1%;
  width:30%;
}

div h6{
font-family:sans-serif;
margin:10px;
text-transform:uppercase;
}

input, h1{
  padding: 0px 10px;
  Margin: 10px 20px 10px 20px;
}

h1{
  font-weight:900;
  text-align:center;
  padding:3px;
  font-family:sans-serif;
}

h2{
  margin:2px;
}
h6{
  margin:0px;
}
  
  /*all div*/
  div{padding:5px;background-color:transparent;border:1px solid #999;}
  div:hover{border:1px solid #000;}

  div:nth-child(1){background-color:#999;border:1px solid #000;}            
  div:nth-child(2):hover{background-color:#458B00;color:black;}
  div:nth-child(3):hover{background-color:#ff4d4d;}
  div:nth-child(4){background-color:#999;cursor:pointer;}
  div:nth-child(5){background-color:#444;padding:5px;}
  div:nth-child(6):hover{background-color:#999;padding:5px;}

input[type=submit]{
  background-color:#999;
  padding:20px 50px;
  border-radius:4px;
  font-size:1.6em;
}

input[type=submit]:hover{
  background-color:#3998fc;
}

input[type=date]{
  background-color:transparent;
  width:80%;
  font-size:2em;
  border:1px solid transparent;
  border-radius:4px;
}

input[type=date]:focus{
  outline: 1px solid #000;
}

#sectionHide{
  display:none;
} 

function toggle_div(id){
        var divelement = document.getElementById(id); 
        if(divelement.style.display == 'none')
          divelement.style.display = 'block'
        else
          divelement.style.display = 'none';
        }