I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes. I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.

The home page can be seen here .html then click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you". If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None

     <a href="#" onclick="document.getElementById('formal').style.display='block';document.getElementById('informal').style.display='none';">Display   Formal</a>

The CSS classes are defined externally as follows:

    .formal { display:block;
    }

    .informal {display:block;
    }

And the Spanish phrases are defined in divs as follows:

     <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 -->

If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.

I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes. I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.

The home page can be seen here http://www.pslt.biz/mobileApp/LE4/index3.html then click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you". If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None

     <a href="#" onclick="document.getElementById('formal').style.display='block';document.getElementById('informal').style.display='none';">Display   Formal</a>

The CSS classes are defined externally as follows:

    .formal { display:block;
    }

    .informal {display:block;
    }

And the Spanish phrases are defined in divs as follows:

     <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 -->

If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.

• javascript
• css

• Do you just need to toggle (show / hide) these divs ? – FLX Commented Jun 4, 2013 at 10:51

5 Answers 5

You can use jQuery:

<a href="#" 
    onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>

The problem is your divs have classes "formal" and "informal", not ids and you are selecting by ID.

Another option:

    <a href="#" onclick="$('.formal').show();$('.informal').hide()">Display Formal</a>

Use getElementsByClassName() instead of getElementById().

You have selector by class name, not by id Or replace class="informal" and class="formal" with id="informa1" etc.

The solution from MiFeet worked perfectly. I used Display Formal

For some reason I was unable to show that as the answer, I received an error when I clicked on the checkbox, I hope this helps someone else.

Tony Babb

JS code:

button.onclick=function(){

    element=document.getElementsByClassName("formal")[0];
    element.className="informal";

}

if you have class="informal" then replace it with class="informal1" and try this

<a href="#" onclick="change();" id="remove" class="informal">Display Formal</a>

function change(){

$('#remove').removeClass('informal');
$("#remove").addClass("informal1");

}