Home/ Questions/Q 6847533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:45:22+00:00

I have two buttons and two divs(I put one above another). I made info

  • 0

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:

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

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


        }); 

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

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


        });

Here is html code:

<div clas"corpo_buttons">
         <div class="corpo_buttons_global">
                   Global
         </div>
         <div class="corpo_buttons_asia">
                    Asia
         </div>
</div>
<div class="info">
           Info1
</div>
<div class="info2">
           Info2
</div>

and css:

.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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This could be related to your “visibility: hidden;” in .info2. I’d suggest trying it with “display: none;” instead.

    The way the jquery show/hide methods work is by toggling the display from none to block and back again. Chances are it’s not paying attention at all to your visibility state.

    If your absolutely dependant on visibility in your css you can change the code to toggle that one instead:

    $('.info').css('visibility', 'hidden');
$('.info2').css('visibility', 'visible');
    • 0