How to fix issues with responsive website when redirecting browser window on DESKTOP?

Question

I am creating a responsive site, when redirecting the window size on the DESKTOP some adjustments are being made and when RETURN to normal size (maximize) the adjustments return. So far so good.

The problem is in the MENU and in part of the site but I will show a simple and easy to understand example below that error occurs on the ok site.

I have the following:

TITLE
CALLING FOR
Contents

In this case the title is in H1 the call in H2 and the content in H3 (this in the case is within one that I will explain why soon).

When we view on the DESKTOP everything is required directly because we have space for it, but when it is displayed on a smaller screen (smartphone or tablet) the idea would be 'hide' the div that is with the H3 and only display if the user requests. So we put a button then to run this.

TITLE
CALLING FOR
button to display content
Contents

THE PROBLEM IS THIS:

If you decrease the size of the window the CONTENT disappears and when you enlarge again the CONTENT appears. All RIGHT, however, if I decrease the size of the window, can I click the button to display the content remember? This happens with an effect in jQuery to give a SLIDE.

By clicking on the button the CONTENTS appears and clicking on the button again the CONTENTS 'some' again with the slide effect, perfect. now if I maximize the window the CONTENT simply does not appear... it remains hidden (because it disappeared due to jquery SLIDE and not due to CSS:None display then even if CSS says that now it has the display:block again it does not appear...)

But I’ve seen many sites with this type of effect, as for example in the MENU, I have a MENU at the top of the inline site but when redirecting it changes (to list and is fixed on the right side).

Until then ok... but in this process I apply the display: None too and it only appears if you click the 'menu button' as any site does.

If I click the MENU appears with slide and can be closed that will also be done by jquery SLIDE but now if increasing the window where is the top inline MENU? Even if the display:block comes back due to the width specified in the CSS as the MENU disappeared with the SLIDE effect it no longer appears (only if I shrink the window, open the MENU and then maximize the window again now it goes back to normal but this is weird I don’t know there).

Any idea how to do this personal?

I think the ideal would be to NOT use jquery’s SLIDE to make it appear and disappear, but then how to do this?

Thank you very much.

HTML

<h1>Lorem Ipsum</h1>

<h2>O que é Lorem Ipsum?</h2>

<input class="btn" type="button" value="Mostrar/Esconder" onclick="conteudo();">

<div id="conteudo" class="conteudo">
<h3>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</h3>
</div>

CSS to hide CONTENT when resizing the window

.btn {display: none}
.conteudo {display: block}

@media screen and (max-width:640px){
.conteudo {display: none;}
.btn {display: block}
}

JS used to 'link' the JQUERY and use the effect in question.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

JS used to show/hide the CONTENT when displaying 'mobile'.

<script>    
var slide = 'slide';
var optionsSlideUp = { direction: "up" };
function conteudo(){$('#conteudo').toggle(slide, optionsSlideUp, 500);}
</script>

If the SLIDE effect is not used everything works well, the CONTENT is with display: None with small window and again with display: block when maximizing... but if using the SLIDE effect occurs this, even maximizing it does not come back.

Answer 1

This happens because the function $.toggle applies an animation and at the end of this animation adds display: none; at the style of the element she fostered.

So what’s happening is that after hiding the contents of your div gets that way: <div id="conteudo" style="display: none;">.

That’s why it’s no longer showing. You can fix it two different ways, by CSS or JS.

CSS (Advisable)

@media screen and (min-width:640px){
    .conteudo {
        display: block; !important
    }
}

That way when your div is on "big screen" will always be with display: block.

JS (Nope):

var $document = $(document),
    $conteudo = $("#conteudo");

$(window).on('resize', function(){
  if ($document.width() > 640) {
    $conteudo.show()
  }
});

OBS: I’m only leaving this example if the CSS solution doesn’t solve your problem. But I warn you that this code is not optimized and if you are going to use it search first on Throttle e debounce de eventos javascript.