css - Change the width of a when clicked without JavaScript? -

I am using a "layout with window" (i.e., content within some devices, in-browser window Looks like a web-app look), and I would like to have the following function:

• When a div is clicked, it becomes smaller so that it can not take place when it If clicked again, then it is expanded again.

  Enter two & lt; Div & gt; There is an example for a simple page with s:

  & lt; Div id = "window1" & gt; and & lt; Div id = "window2" & gt;

    # window1 {width: 30px; } # Window1: Active {width: 100px; }   
   The problem is, once the mouse button is left, the width returns to its original size  
   
   Actually on the bottom left of the screen There is a small menu on the part ( fixed ), which I want to get out of people with small proposals (1024 and above) because it will be found in the way of the text   
   
   
   Here's how I am using: target -  
   HT Mel  
    & lt; Div class = "block" & gt; & Lt; One class = "open" href = "# menu" & gt; & Lt; / A & gt; & Lt; Div id = "menu" & gt; Menu item 1 & lt; Br / & gt; Menu item 2 & lt; Br / & gt; Menu item 3 & lt; Br / & gt; Menu item 4 & lt; Br / & gt; Menu item 5 & lt; Br / & gt; Menu item 6 & lt; Br / & gt; Menu item 7 & lt; Br / & gt; & Lt; One class = "closed" href = "#" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
   css  
    .block {status: relative; } # Menus {width: 100px; Background: Red; Limit: 1 px solid # aaaa; } #Menu: Goal {background: orange; Width: 200px; }. open,. Closed {status: complete; Top: 0; Bottom: 0; Left: 0; Correct: 0; } .close {display: none; } #Menu: Target. Close {display: block; }   
   â ???? Unfortunately this solution clicks on the page every time. It is also unnecessarily large, taking advantage of a solution: The checked selector requires very little HTML and CSS and does not jump to the page on every click. This is a solution, and I recommend:  
   HTML ...  
    & lt; Div class = "block" & gt; & Lt; Label = "toggle" & gt; & Lt; / Label & gt; & Lt; Input type = "checkbox" id = "toggle" /> & Lt; Div id = "menu" & gt; Menu item 1 & lt; Br / & gt; Menu item 2 & lt; Br / & gt; Menu item 3 & lt; Br / & gt; Menu item 4 & lt; Br / & gt; Menu item 5 & lt; Br / & gt; Menu item 6 & lt; Br / & gt; Menu item 7 & lt; Br / & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
   ... and CSS ...  
    .block {status: fixed; Bottom: 0; } # Toggle {display: none; } Label [for = "toggle"] {position: absolute; Top: 0; Bottom: 0; Left: 0; Correct: 0; } # Menus {width: 100px; Background: Red; Limit: 1 px solid # aaaa; } #Toggle: Check ~ # menu [background: orange; Width: 200px; }   
   one ????  
   A ????