<section id="g-intro" class="metade size-flex">
<div class="g-container">
<div class="g-block hidden-desktop g-block-flex size-100">
<div class="g-content g-particle">
<div class="sample-content">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
<div class="sample-description"></div>
</div>
</div>
<div class="g-grid">
</div>
</div>
</div>
</div>
</div>
<div class="g-grid">
<div class="g-block g-block-flex center size-100">
<div class="g-content g-particle">
<button type="button" id="b-valores" class="button-valores" data-element="#g-valores">NOSSOS VALORES</button>
<div class="content-servico">
<div id="g-valores">
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="mask">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#g-valores{margin-left:0;float:left; position:relative; display: none;}
JS
(function($) {
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if(isMobile && window.matchMedia("(orientation: portrait)").matches){
function AllHeight( elem ) {
var altura = $( window ).height() + "px";
$( elem ).css({
height: altura
});}
$( window ).on( "load size", function() {
AllHeight( "#uppercg, #upper,#g-intro" );
});
} else if(isMobile && window.matchMedia("(orientation: landscape)").matches){
function AllHeightLand( elem ) {
var altura = $( window ).height() + "px";
$( elem ).css({
height: altura
});
}
$( window ).on( "load size", function() {
AllHeightLand( "#uppercg, #upper,#g-intro" );
});
}
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
window.addEventListener("resize", function () {
location.reload();
}, false);
}
if (window.matchMedia("(orientation: landscape)").matches) {
window.addEventListener("resize", function () {
location.reload();
}, false);
}
}, false);})(jQuery);
(function($) {
$(function(){
$(".button-valores").click(function(e){
e.preventDefault();
el = $(this).data('element');
$(el).slideToggle('slow');
});
});})(jQuery);