It is necessary to make the CSS animation to hide and display fields in the "main-wrap" by changing the height of the nested elements.

For example, cited two - "description" and "select-menu" .

At the same time, the menu can remain both minimized and maximized, and also none of the nested elements can have overflow:hidden . Therefore, max-height:0; to max-height: ...px max-height:0; to max-height: ...px not suitable.

We tried to implement transform scaleY(0 to 1) on transform scaleY(0 to 1) , but then the place occupied by the block remains, and we want to avoid this.

 $(function() { $('.main-wrap').on('click', function() { var $this = $(this); if ($this.hasClass('minified')) { $this.removeClass('minified') } }); $('button').on('click', function(e) { $('.main-wrap').addClass('minified'); e.stopPropagation(); }); $('.select-menu-wrap').on('click', function() { $(this).toggleClass('visible-menu'); }); $('.select-menu-item').on('click', function() { $('.select-menu-title').addClass('is-selected').find('.selected').text($(this).text()); }); }); 
 * { outline: none; } .main-wrap { border: 1px solid black; padding: 10px 10px 80px; position: relative; } .minified .description { display: none; } .minified .select-menu-wrap { display: none; } .minified button { display: none; } button { position: absolute; bottom: 0; left: 40%; } .select-menu-wrap { position: relative; margin-bottom: 10px; } .select-menu { display: none; padding: 4px; } .visible-menu .select-menu { display: block; } .selected { display: none; } .select-menu-title { padding: 4px; } .is-selected .selected { display: inline; } .is-selected .no-selected { display: none; } .description { margin: 10px 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-wrap minified"> <div class="title">Заголовок всегда виден. Нажмите на блок, чтобы развернуть</div> <div contenteditable="true" class="description">Тут пояснение, что к чему.</div> <div class="select-menu-wrap"> <div class="select-menu-title"> <span class="no-selected">Нажмите сюда, чтобы выбрать из списка</span> <span class="selected"></span> </div> <div class="select-menu"> <div class="select-menu-item">Позиция 1</div> <div class="select-menu-item">Позиция 2</div> <div class="select-menu-item">Позиция 3</div> </div> </div> <button type="button">Свернуть</button> </div> <div style="margin-top: 12px;">Здесь текст, чтобы видеть как блок с ним взаимодействует.</div>

  • question: why, actually, it is impossible to use overflow: hidden ? - malginovdesign
  • since inside, for example, the edited DIV has an editor that flies after the selection and can go beyond the boundaries of the block, well, and other blocks that I have not brought in this example have different states - tooltips and so on. - sivik_xes
  • such a question: what is its own, the essence of changes in the height of elements? I gave you an example: jsfiddle.net/bgvccjk7 - did I understand you correctly? Do you need to show / hide forms? - Maqsood
  • For animation, you can use animate.css - Maqsood
  • Please watch the tags on the instructions of css, css3! jquery - not suitable, in principle, animate.css did not find the desired effect, and I don’t welcome ready-made solutions, since unused lines of code will hang - sivik_xes

2 answers 2

At once I will say that I still used overflow: hidden , but only to visually limit the movement of elements. In principle, this can be avoided by using the necessary z-index and fills with div colors. In general, something turned out, I hope this will help you.

CodePero

 $(function() { $('.main-wrap').on('click', function() { var $this = $(this); if ($this.hasClass('minified')) { $this.removeClass('minified') } }); $('button').on('click', function(e) { $('.main-wrap').addClass('minified'); e.stopPropagation(); }); $('.select-menu-wrap').on('click', function() { $(this).toggleClass('visible-menu'); }); $('.select-menu-item').on('click', function() { $('.select-menu-title').addClass('is-selected').find('.selected').text($(this).text()); }); }); 
 @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=latin,cyrillic); * { outline: none; transition: all .2s ease-out; font-family: 'Roboto Slab'; box-sizing: border-box; } body { background: url(http://malginovdesign.ru/wordpress/wp-content/uploads/2016/03/head-bg.png); background-size: cover; } .main-wrap { background: #f5f5f5; padding: 15px 10px 80px; position: relative; width: 500px; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.2); top: 50px; border-radius: 2px; } .main-wrap, .select-menu-wrap { overflow: hidden; } .title:active { background: #e0e0e0; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .title:hover { background: #eee; } .title, .select-menu-title { cursor: pointer; padding: 8px 0; margin: 0 40px 2px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 1; position: relative; background-color: #f9f9f9; } .minified .description, .minified .select-menu-wrap { opacity: 0; padding: 4px; position: absolute; top: -999px; } .visible-menu .select-menu { opacity: 1; top: 0; position: relative; } .minified button { display: none; } button:active { background: #e0e0e0; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } button:hover { background: #f0f0f0; box-shadow: 0 2px 7px rgba(0,0,0,0.25); } button { position: absolute; bottom: 15px; left: 50px; width: calc(100% - 100px); border: none; background: #fafafa; padding: 8px 0; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .description, .select-menu-wrap { position: relative; text-align: center; top: 0; opacity: 1; } .description { background: #f0f0f0; padding: 10px 0; margin: 0 40px; } .select-menu { opacity: 0; padding: 4px; position: absolute; top: -999px; } .select-menu-item { padding: 8px 0; background: #f0f0f0; border-bottom: 1px solid #e0e0e0; margin: 0 35px; cursor: pointer; } .selected { display: none; } .is-selected .selected { display: inline; } .is-selected .no-selected { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-wrap minified"> <div class="title">Развернуть меню</div> <div contenteditable="true" class="description">Тут пояснение, что к чему.</div> <div class="select-menu-wrap"> <div class="select-menu-title"> <span class="no-selected">Выбрать позицию</span> <span class="selected"></span> </div> <div class="select-menu"> <div class="select-menu-item">Позиция 1</div> <div class="select-menu-item">Позиция 2</div> <div class="select-menu-item">Позиция 3</div> </div> </div> <button type="button">Свернуть</button> </div>

  • Sorry, I can’t count this answer as correct, owerflow doesn’t fit, and the animation itself is not very good, there are a lot of these blocks, and because of position absolute there is no effect of smoothly changing the height of the overall wrap - sivik_xes

Here is the solution, though a slightly wrong assumption was in the condition, it turns out that scale + max-height about the same as hidden + max-height , but only without hidden , just did not try to combine them before))

 $(function() { $('.main-wrap').on('click', function() { var $this = $(this); if ($this.hasClass('minified')) { $this.removeClass('minified') } }); $('button').on('click', function(e) { $('.main-wrap').addClass('minified'); e.stopPropagation(); }); $('.select-menu-wrap').on('click', function() { $(this).toggleClass('visible-menu'); }); $('.select-menu-item').on('click', function() { $('.select-menu-title').addClass('is-selected').find('.selected').text($(this).text()); }); }); 
 * { outline: none; } .main-wrap { border: 1px solid black; padding: 10px 10px 80px; position: relative; } .minified .description { transition: opacity 300ms linear, transform 300ms linear 250ms, max-height 300ms linear 250ms, margin 300ms linear 250ms, padding 300ms linear 250ms; transform-origin: top; transform: scaleY(0); max-height: 0; opacity: 0; } .minified .select-menu-wrap { transition: opacity 300ms linear, transform 300ms linear 250ms, max-height 300ms linear 250ms, margin 300ms linear 250ms, padding 300ms linear 250ms; transform-origin: top; transform: scaleY(0); max-height: 0; opacity: 0; } .minified button { transition: opacity 300ms linear, transform 300ms linear 250ms, max-height 300ms linear 250ms, margin 300ms linear 250ms, padding 300ms linear 250ms; transform-origin: top; transform: scaleY(0); max-height: 0; opacity: 0; } button { position: absolute; bottom: 0; left: 40%; transition: transform 300ms linear, max-height 300ms linear, margin 300ms linear, padding 300ms linear, opacity 300ms linear 300ms; max-height: 200px; opacity: 1; transform: scaleY(1); } .select-menu-wrap { position: relative; margin-bottom: 10px; transition: transform 300ms linear, max-height 300ms linear, margin 300ms linear, padding 300ms linear, opacity 300ms linear 300ms; max-height: 200px; opacity: 1; transform: scaleY(1); } .select-menu { transition: opacity 300ms linear, transform 300ms linear 250ms, max-height 300ms linear 250ms, margin 300ms linear 250ms, padding 300ms linear 250ms; transform-origin: top; transform: scaleY(0); max-height: 0; opacity: 0; padding: 4px; } .visible-menu .select-menu { transition: transform 300ms linear, max-height 300ms linear, margin 300ms linear, padding 300ms linear, opacity 300ms linear 300ms; max-height: 200px; opacity: 1; transform: scaleY(1); } .selected { display: none; } .select-menu-title { padding: 4px; } .is-selected .selected { display: inline; } .is-selected .no-selected { display: none; } .description { margin: 10px 0; transition: transform 300ms linear, max-height 300ms linear, margin 300ms linear, padding 300ms linear, opacity 300ms linear 300ms; max-height: 200px; opacity: 1; transform: scaleY(1); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-wrap minified"> <div class="title">Заголовок всегда виден. Нажмите на блок, чтобы развернуть</div> <div contenteditable="true" class="description">Тут пояснение, что к чему.</div> <div class="select-menu-wrap"> <div class="select-menu-title"> <span class="no-selected">Нажмите сюда, чтобы выбрать из списка</span> <span class="selected"></span> </div> <div class="select-menu"> <div class="select-menu-item">Позиция 1</div> <div class="select-menu-item">Позиция 2</div> <div class="select-menu-item">Позиция 3</div> </div> </div> <button type="button">Свернуть</button> </div> <div style="margin-top: 12px;">Здесь текст, чтобы видеть как блок с ним взаимодействует.</div>