Ich möchte, dass mein div auf dem Desktop angezeigt wird, nachdem ich das div nahe in Mobile

Question

toogle habe ich eine einfache Umschaltfläche zum Ausblenden und Anzeigen. Meine Programmierkenntnisse in Javascript/Jquery sind sehr schlecht.

In der Desktop-Ansicht ist die Beschreibung einwandfrei. (Bild in Desktop view.) , während in Mobile gibt es eine Schaltfläche zum Umschalten ausblenden und zeigen Sie die Beschreibung. (Bild in Mobile View.) .

Wenn ich jedoch die Beschreibung in der mobilen Ansicht ausblenden, verschwindet sie in der Desktopansicht, wenn ich den Browser gezogen habe. Nur wenn ich die Option "In Handy anzeigen" auswähle, wird es wahrscheinlich auf dem Desktop angezeigt. Wie kann ich es erscheinen lassen?

Javascript:

//Script 
<script> 
    $(document).ready(function() { 
     $(".toogle-button").click(function() { 
      $(".toggleholder").slideToggle("slow"); 
      $(this).find("i").toggleClass("fa-chevron-down"); 
     }); 
    }); 
</script> 

Html:

//html 
<div class="toogle-button">Introduction<i class="pull-right fa fa-chevron-up fa-chevron-down"></i></div> 
<div class="toggleholder"> 
    <div class="desc-holder"> 
     <p> 
      <p><b>Subject:</b></p> 
      <span class="side-text">Design</span> 
     </p> 
     <p> 
      <p><b>Description:</b></p> 
      <span class="side-text">This quiz is to test your knowledge on HTML basic foundation.</span> 
     </p> 
    </div> 
    <div class="user-holder"> 
    <p><b>Assigned By:</b></p> 
    <div class="profile-holder"> 
     <div class="avatar-holder"> 
      <img src="/include/images/default/avartar_32.png" class="avatar32" /> 
     </div> 
     <div class="username">Admin Asriah Asadi</div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

Css/Abzüglich:

.toogle-button { 
display: none; 
margin-top: 15px; 
padding: 10px; 
background-color: #055eac; 
@media only screen and (max-width: @screen-xs-max) { 
    display: block; 
    } 
} 

Answer 1

Ich schlage vor, Sie den Event-Handler verwenden window.resize, und was zu tun du machst das weiter neuer Maßstab:

$(window).resize(function() 
{ 
    var desktop_mobile_breakpoint = 768; //or whatever else!! it should be you @screen-xs-max... 
    //when you drag your window 
    if ($(window).width() > desktop_mobile_breakpoint) $('.toggleholder').show(); //desktop: we show it 
    else $('.toggleholder').hide(); //mobile: we hide it 
});