CSS изменение размера элемента по щелчку

Question

Пожалуйста, смотрите на странице, чтобы начать с: http://codepen.io/Mickael/pen/ztqnp?editors=110

То, что я пытаюсь сделать, это когда один нажимает на иконку в правом верхнем углу, родительские размера контейнера увеличивая ее ширину до 100% (в настоящее время она установлена ​​в значение px, так как есть другой элемент справа от нее (список задач)).

Я хотел бы сделать следующее:

1. по щелчку значка, используйте переход расширить ширину до 100%

2. раз расширились, я хочу, чтобы контейнер охватит список задач полностью (я могу работать с одним из них с z-индексом и положением)
   

3. после того, как ящик расширился до 100%, я хотел бы, чтобы стрелка в иконке вверху изменилась на стрелки, указывающие слева (это t он второй, который SVG закомментирована в HTML)

Любая помощь очень ценится ... Ive гугле переход, изменение размеров, динамическая ширина и все виды, но не могу найти ничего, что бы мне точку в правильном направлении о том, что я пытаюсь сделать здесь.

Заранее спасибо

div#middle-container { 
    margin: 0; 
    padding: 0; 
    width: calc(100% - 355px);   <--------- resize this to 100% 
    max-height: calc(100% - 105px); 
    margin-left: 65px; 
    height: 100%; 
    position: fixed; 
    z-index: 0 !important; 
    top: 55px; 
    border-radius: 10px; 
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
    inset 0 1px 1px rgba(255,255,255,1); /*top internal highlight*/ 
    background-color: #777; 
} 

Answer 1

Это довольно легко, определив несколько новых классов.

Один за контейнер ... здесь я использовал full

div#middle-container.full { 
    width:70%; /* demo only, should be 100% in your case */ 
} 

..и один для переключения

#desktop-nav-toggle.switch { 
    transform:rotate(180deg); 
} 

Затем немного Jquery для переключения классов и выключать

$(document).ready(function() { 
    $('#desktop-nav-toggle').click(function() { 
    $(this).parent().toggleClass('full'); 
    $(this).toggleClass('switch'); 
    }); 
}); 

Я ввел пару переходов в Codepen.io Demo

Answer 2

вы также можете сделать что-то вроде этого: Не забудьте загрузить библиотеку Jquery в свой проект в противном случае он не будет работать

$(document).ready(function(){ 
    $('#desktop-nav-toggle').on("click", function() { 
    $('#middle-container').toggleClass('maxWidth') 
    }); 
}); 

Answer 3

<script> 
$(document).ready(function(){ 
    $('#desktop-nav-toggle').on("click", function() { 
    $('#middle-container').css("width","100%") 
    }); 
}); 

Пусть учатся Jquery http://www.w3schools.com/jquery/jquery_css_classes.asp