@media Abfragen und regelmäßige CSS-Interaktionen

Question

Ich habe eine Seite mit einer Seitenwand, die eine position:fixed auf meiner Seite hat. In der CSS, die folgende @ media Abfrage, um das Panel zu verstecken, wenn die Bildschirmbreite unter 1580px (das ist die meisten Bildschirme).

@media screen and (max-width:1580px) { 
    .sideSection { 
    display: none; 
    } 
} 

Ich habe eine versteckte Checkbox und ein Etikett erstellt, um Sie auf das Panel über den Bildschirm zeigen,

<input type="checkbox" name="showSide" id="showSideSection"/> 
<label for="showSideSection" id="sideSectionButton">Show Side Section</label> 
<div class="sideSection"> 
[...] 

und in dem mit CSS:

#showSideSection:checked + label + div { 
    display: inline; 
} 

Das funktioniert perfekt Theoretisch, aber da @media dynamisch ist, wird das Seitenfeld immer ausgeblendet. Gibt es eine Möglichkeit, die @ media Abfrage überprüfen zu lassen, wenn #showSideSection:checked ist; oder eine bessere Möglichkeit, das Panel insgesamt auf Bildschirmen mit einer Breite> 1580 zu zeigen und durch eine Schaltfläche ersetzt zu werden, die das Feld beim Klicken auf Bildschirme mit einer Breite von < 1580 anzeigen würde?

Edit: Dies ist die CSS für die sideSection:

.sideSection { 
    position: fixed; 
    right: 0; 
    top: 180px; 
    height:calc(100% - 180px); 
    width: 230px; 
    padding-top: 50px; 
    padding-right: 20px; 
    padding-left: 10px; 
    background: #ededed; 
    border-left: 5px solid #e33d3d; 
} 

Answer 1

Dies kann nicht mit reinem CSS, Ihre beste Wette eine andere Klasse zu zeigen, die Platte und dann Javascript um diese Klasse hinzufügen verwenden zu erstellen wäre acheived werden in die Seitenleiste, wenn das Kontrollkästchen aktiviert ist.

$('#checkbox').change(function(){ 
if(this.checked){ 
    $('#Section').addClass('checked'); 
} 
else { 
    //do something else 
    $('#Section').removeClass('checked'); 
} 
}) 

http://jsfiddle.net/9UQf8/22/

Answer 2

Ich konnte es dank funktioniert dieser https://jsfiddle.net/xhe96kqr/2/, mit freundlicher Genehmigung von Marcos Pérez Gude, den ich danken. Verwenden Sie nichts anderes als css und @Media Queries:

#showSideSection:checked + label + div { 
    display: block; 
} 

@media screen and (max-width:400px) { 
    .sideSection { 
    display: none ; 
    } 
}