Switch divs when pressing buttons with javascript
<p>I have two buttons and two divs(I put one above another). I made "info" class visible and "info2" hidden. I need when pressed on "Global" button - "info" div is shown and on the "Asia" button - "info2" div. I tried this code but it's not working:</p>

<pre><code>$('.corpo_button_asia').click(function(){ 

                $('.info').hide;
                $('.info2').show;


        }); 

$('.corpo_button_global').click(function(){ 

                $('.info').show;
                $('.info2').hide;


        }); 
</code></pre>

<p>Here is html code:</p>

<pre><code>&lt;div clas"corpo_buttons"&gt;
         &lt;div class="corpo_buttons_global"&gt;
                   Global
         &lt;/div&gt;
         &lt;div class="corpo_buttons_asia"&gt;
                    Asia
         &lt;/div&gt;
&lt;/div&gt;
&lt;div class="info"&gt;
           Info1
&lt;/div&gt;
&lt;div class="info2"&gt;
           Info2
&lt;/div&gt;
</code></pre>

<p>and css:</p>

<pre><code>.corpo_buttons
{
height:50px;
}

.corpo_buttons_global
{
position:absolute;
z-index:10;
width:50px;
float:left;
background-color:rgb(23,55,94);
color:#FFF;
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}

.corpo_buttons_asia
{
position:relative;
z-index:2;
left:45px;
width:50px;
float:left;
padding:2px;
background-color:rgb(197,197,197);
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}

.info
{
position:absolute;
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
}

.info2
{
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
visibility: hidden;
}
</code></pre>
