Indhold skifter baseret på valg

Hej
Jeg er nu igang med at lave en større opsætning hvor der skal vises en formular baseret på en valgt radio-button.
Jeg har som udgangspunkt fået det hele til at fungere, dog er der lige den sidste del hvor jeg baseret på et valg fra brugeren skal vise den korrekte formular.
Jeg anvender i forvejen Bootstrap til flere forskellige funktioner i løsningen og til størstedelen af layoutet.
Jeg har allerede lavet følgende kode:

 <div class="col-xs-11 col-sm-8 well">
     <h2>Database</h2>
     <p>In order for the system to work properly please choose the correct database below and fill in the credentials.</p>        
     <div class="col-xs-11 col-sm-8">
         <div class="radio">
             <label class="tip" data-toggle="tooltip" data-placement="right" title="Choose this option if you are using a MySQL database server. This is the most common server for websites">
                 <input type="radio" name="optionsSQL" id="optionsMySQL" value="mysql" onclick="val_sql()">
                 MySQL 5.x
             </label>
         </div>
         <div class="radio">
             <label class="tip" data-toggle="tooltip" data-placement="right" title="Choose this option if you are using a Microsoft SQL Server or SQL Azure Server. This option is tested on Microsoft SQL Server 2012">
                 <input type="radio" name="optionsSQL" id="optionsMSSQL" value="mssql" onclick="val_sql()">
                 Microsoft SQL Server / SQL Azure
             </label>
         </div>
         <div class="radio">
             <label class="tip" data-toggle="tooltip" data-placement="right" title="Choose this option if you are using Postgre SQL server. This is one of the options that are rarely used and has not been tested.">
                 <input type="radio" name="optionsSQL" id="optionsPGSQL" value="pgsql" onclick="val_sql()">
                 PostgreSQL
             </label>
         </div>
         <div class="radio">
             <label class="tip" data-toggle="tooltip" data-placement="right" title="Choose this option if you are using SQLite as your database server. This option is recommended only for testing and this system has not been validated to work with SQLite">
                 <input type="radio" name="optionsSQL" id="optionsSQLite" value="sqlite" onclick="val_sql()">
                 SQLite 3 and SQLite 2
             </label>
         </div>
         <div id="MySQL" class="form-hide">
             <form name="setDB" action="" method="POST" role="form">
                 <div class="form-group">
                     <label for="inputHost">Database Server</label>
                     <input type="text" class="form-control" id="inputHost" value="localhost">
                 </div>
                 <div class="form-group">
                     <label for="inputDB">Database</label>
                     <input type="text" class="form-control" id="inputDB">
                 </div>
                 <div class="form-group">
                     <label for="inputUser">Database User</label>
                     <input type="text" class="form-control" id="inputUser">
                 </div>
                 <div class="form-group">
                     <label for="inputPwd">Database Password</label>
                     <input type="password" class="form-control" id="inputPwd">
                 </div>
                 <button type="submit" id="lang_submit" name="DBmysql" class="btn btn-primary disabled"><span class="glyphicon glyphicon-circle-arrow-right"></span> Next</button>
             </form>
         </div>
         <div id="MSSQL" class="form-hide">
             <form name="setDB" action="" method="POST" role="form">
                 <div class="form-group">
                     <label for="inputHost">Database Server</label>
                     <input type="text" class="form-control" id="inputHost" value="localhost">
                 </div>
                 <div class="form-group">
                     <label for="inputDB">Database</label>
                     <input type="text" class="form-control" id="inputDB">
                 </div>
                 <div class="form-group">
                     <label for="inputUser">Database User</label>
                     <input type="text" class="form-control" id="inputUser">
                 </div>
                 <div class="form-group">
                     <label for="inputPwd">Database Password</label>
                     <input type="password" class="form-control" id="inputPwd">
                 </div>
                 <button type="submit" id="lang_submit" name="DBmssql" class="btn btn-primary disabled"><span class="glyphicon glyphicon-circle-arrow-right"></span> Next</button>
             </form>                
         </div>
         <div id="PGSQL" class="form-hide">
             <form name="setDB" action="" method="POST" role="form">
                 <div class="form-group">
                     <label for="inputHost">Database Server</label>
                     <input type="text" class="form-control" id="inputHost" value="localhost">
                 </div>
                 <div class="form-group">
                     <label for="inputDB">Database</label>
                     <input type="text" class="form-control" id="inputDB">
                 </div>
                 <div class="form-group">
                     <label for="inputUser">Database User</label>
                     <input type="text" class="form-control" id="inputUser">
                 </div>
                 <div class="form-group">
                     <label for="inputPwd">Database Password</label>
                     <input type="password" class="form-control" id="inputPwd">
                 </div>
                 <button type="submit" id="lang_submit" name="DBpgsql" class="btn btn-primary disabled"><span class="glyphicon glyphicon-circle-arrow-right"></span> Next</button>
             </form>
         </div>
         <div id="SQLite" class="form-hide">
             <form name="setDB" action="" method="POST" role="form">
                 <div class="form-group">
                     <label for="inputHost">Database Server</label>
                     <input type="text" class="form-control" id="inputHost" value="localhost">
                 </div>
                 <div class="form-group">
                     <label for="inputDB">Database</label>
                     <input type="text" class="form-control" id="inputDB">
                 </div>
                 <div class="form-group">
                     <label for="inputUser">Database User</label>
                     <input type="text" class="form-control" id="inputUser">
                 </div>
                 <div class="form-group">
                     <label for="inputPwd">Database Password</label>
                     <input type="password" class="form-control" id="inputPwd">
                 </div>
                 <button type="submit" id="lang_submit" name="DBsqlite" class="btn btn-primary disabled"><span class="glyphicon glyphicon-circle-arrow-right"></span> Next</button>
             </form>                
         </div>            
     </div>            
 </div>

Jeg har 4 radio-buttons og 4 DIV's. Hver knap hører til en DIV. Det er meningen at der i starten kun skal vises de 4 radio-buttons og så snart man vælger en knap vises kun den relevante DIV. Vælger man en anden radio-button forsvinder den gamle DIV og der vises en ny DIV som er relevant for det nye valg.

Men hvordan laver jeg dette på den mest optimale måde?
Jeg havde tænkt mig noget i stil med:

 function val_sql() {
     var sql = $('input[name=optionsSQL]:checked').val();
     switch(sql) {
         case 'mysql':
             //Show mysql div
             $("div#mysql").removeClass("form-hide");
         break;
         case 'mssql':
             //Show mssql div
             $("div#mssql").removeClass("form-hide");
         break;
         case 'pgsql':
             //Show pgsql div
             $("div#pgsql").removeClass("form-hide");
         break;
         case 'sqlite':
             //Show sqlite div
             $("div#sqlite").removeClass("form-hide");
         break;
         default:
             //do nothing
         break;        
     }
 }

Funktionen val_sql() bliver så kaldt når mine radio-buttons ændrer sig, altså "onchange".
Men så skal jeg jo skjule de urelevante DIV-tags. Her vil jeg jo skulle tjekke hver enkelt div for at se om de har class="form-hide" og hvis den mangler skal den tilføjes.

Findes der en bedre måde, evt. med bootstrap?