how can i hide some div's from mobile browser.? and display new div's.?

Question

i had following two div's in my site,

<div class="desktop_1">some desktop site data 1</div>
<div class="desktop_2">some desktop site data 2</div>

what i am asking is, when browse this page any mobile device just disabled above two dives, and display following new div's

<div class="mobile_1">some mobile data 1</div>
<div class="mobile_2">some mobile data 2</div>

if detect mobile devices disble first two dive's then display second two div's... how can i figure it.??? i hope you got what i meant here...

thanks

Answer 1

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)   )   
  {
    $(".desktop1").hide();
    $(".mobile_1").show();
   }

Untested code!Should work I guess...You can see more solutions here

Answer 2

You could try looking at Media Queries which would allow you to have them declared separately like so:

@media only screen 
and (min-width : 1024px) {
    .desktop_1 {
        /* Styles */
    }
    .desktop_2 {
        /* More Styles */
    }
}

@media only screen 
and (max-width : 320px)
    .mobile_1 {
        /* Styles */
    }
    .mobile_2 {
        /* More Styles */
    }
}

And if both divs appear in your code and need to be hidden, you can always include the opposite media's declaration in the query for it to make it hidden, like this:

@media only screen 
and (min-width : 1024px) {
    .desktop_1 {
        /* Styles */
    }
    .desktop_2 {
        /* More Styles */
    }

    /* Hide Mobile on Desktop */
    .mobile_1 {
        display: none;
        visibility: hidden;
    }
    .mobile_2 {
        display: none;
        visibility: hidden;
    }
}

And vice versa in the mobile declaration.