How can I specify which divs to display using js/css

Question

I'm building a web app that will be converted to a smartphone app, probably using phone gap build. I began by using the jquery mobile sample which appears to work well. The app will display a series of phrases on the page in English and then optionally display the phrase in Formal Spanish or Informal Spanish, the user can also tap the screen to hear the phrase.
The problem I'm having is how to control whether the user sees the Formal or informal Spanish. I'd like to have either a couple of checkboxes where the user can select Formal/ Informal/ Both or three buttons identified as Formal/ Informal/Both, buttons would be preferable to checkboxes.
I set up DIVs around the Formal and Informal Spanish phrases and defined them as "Class: Formal" or Class Informalt" and thought I'd use Display:Inline or Display:None but how do I get from someone tapping on a button to changing the CSS so that the class selected is defined as Display:Inline and the class not selected is defined as Display:None? As this will be a smartphone app all I can use is HTML, CSS and JS.
This is my first app and I'm having a hard time getting my head around this.
The web app can be seen here www.pslt.biz/mobileApp/LE4/index.html#ageWtHt  where you'll see a single English phrase and the Formal and Informal Spanish.
Thanks for any direction you can give.
Here's the html for the aprt of the page in question
<div data-role="content">
     <div style="float:left"; "width:100%">
          <div style="width:200px">
               <strong> How old are you?</strong>
          </div>
         <div  class="formal">
             <div style="float:left">
                   <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                   <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
             </div>
          <div style="float:left">
                Cuántos años tiene?
          </div>
       </div>
       <div class="informal">
           <div style="clear:left">
               <div  style="float:left">
                     <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                      <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
               </div>
               <div>
                    Cuántos años tienes?
               </div>
          </div>
   </div>
</div>

Answer 1

Hi Murray,
Thanks for the js code. I tried it and am having problems getting it to work. You can see the webapp here www.pslt.biz/mobileApp/LE4/index3.html , Then click on "Age, Weight & Height" and you'll see the buttons I added. There will be multiple English phrases on a page each one having two Spanish translations, one in Formal Spanish and the second in Informal Spanish. When the user clicks "Formal" they should see all the English phrases and only the Formal Spanish phrases(the first Spanish phrase after the English), when they click "Informal" they should see all the English phrases and only the Informal Spanish phrases(the second Spanish phrase) and when they click "Formal & Informal" they should see the English phrases followed by both Spanish phrases.  I have only set this up for the first phrase on the page, once i get it working for one phrase the rest should be easy....
I tried aligning the buttons underneath the page header but when I did this, using a Div around the buttons, the buttons disappeared and I was left with links in blue that were very hard to read. I must be doing something wrong here too. I really appreciate your assistance with this.
In case it helps, below is the code for the buttons in the header section of the page and the first English phrase on the page in the "Content" section of the page. Following that is the CSS which is in a separate file if that makes any difference.
Thanks again.
<div data-role="page" id="ageWtHt">
<div data-role="header" data-theme="b">
        <h1>Age, Weight & Height</h1>
        <h1>1 kilo = 2.2 lbs, 1 meter = 3.3 ft. </h1>  
    <a href="#" onclick="document.getElementById('formal').style.display='block';documen t.getElementById('informal').style.display='none';">Display Formal</a>
           <a href="#" onclick="document.getElementById('formal').style.display='none';documen t.getElementById('informal').style.display='block';">Display Informal</a>
           <a href="#" onclick="document.getElementById('formal').style.display='block';documen t.getElementById('informal').style.display='block';">Display Formal & Informal</a>
</div>
<div data-role="content">
    <!-- Start test formal informal layout -->
<div style="float:left"; "width:100%"> <!--Start formal/informal -->
     <div class="english" style="width:200px"> <!-- Start English -->
         How old are you?
     </div> <!-- End English -->
     <div class="formal"> <!-- Start Formal -->
         <div style="float:left">
            <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
  <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
         </div>
         <div style="float:left">
          Cuántos años tiene?
         </div>
    </div> <!-- End Formal -->
    <div class="informal"> <!-- Start informal -->
         <div style="clear:left">
              <div  style="float:left">
        <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
  <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
           </div>
           <div>
           Cuántos años tienes?
           </div>
       </div>
    </div> <!-- End informal -->
</div> <!-- End formal/informal test -->
   <!-- End test formal informal layout -->
  <h1><Br /><Br /> <Br />IGNORE BELOW HERE </h1>
*******here is the CSS*******
@charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
.english { display:block;
font-weight:bold;
.formal { display:block;
.informal {display:block;
Tony