Good day! How to make that at the initial state 50% of this div was shown, and after pressing the button another 50% was shown?

<script> function change(idName) { if(document.getElementById(idName).style.display=='none') { document.getElementById(idName).style.display = ''; } else { document.getElementById(idName).style.display = 'none'; } return false; } </script> <div style="display:none;" id="test"> <div class="hide"> Подкатегории: <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> </div> </div> <a href="#" onclick="change('test')">Ещё</a>

    4 answers 4

    If jquery is allowed, you can do this:

     $(function(){ var h=$(".hide").height(); //получаем высоту блока с контентом $(".hide").css({"height": h/2}); //устанавливаем высоту блока с контентом в 50% $(".button").click(function(){ //нажатие на кнопку if(h==$(".hide").height()){ //если высота блока на момент нажатия на кнопку равно изначальной высоте блока то $(".hide").css({"height": h/2}); //устанавливаем высоту блока в 50% от изначальной } else { //иначе $(".hide").css({"height": h}); //устанавливаем высоту блока в 100% } }); }); 
     .hide { overflow: hidden; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> <div class="hide"> Подкатегории: <br/> <a href="#"> Белые комоды</a><br/> <a href="#"> Большие</a> <br/> <a href="#"> В гостиную</a> <br/> </div> <button class="button">Ещё</button> </div> 

       document.querySelector("button").addEventListener('click', function() { var el = document.querySelector(".hide"); if(el.style.height === 'auto') { el.style.height = '0'; this.innerText = 'Еще'; } else { el.style.height = 'auto'; this.innerText = 'Скрыть'; } }, false); 
       a { border-bottom: 1px solid #ccc; display: block; padding: 10px; } .hide { height: 0; overflow: hidden; } 
       <div id="test"> Подкатегории: <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> <div class="hide"> <a href="#"> В гостиную</a> <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> </div> </div> <button>Ещё</button>

        It can be so -

         let toggleButton = document.querySelector('.slider-toggle'); let slider = document.querySelector('.slider'); toggleButton.addEventListener('click', toggleButton_clickHandler); function toggleButton_clickHandler() { toggleButton.classList.add('hide-toggle-button'); slider.classList.add('hide-slider'); } 
         body { overflow: hidden; } .container { width: 100vw; height: 100%; position: absolute; } .left, .right { width: 50%; height: 100%; float: left; } .left { background: tomato; } .right { background: gold; } .slider { width: 50%; height: 100%; background: #fff; position: absolute; left: 50%; transition: left 1s; } .slider-toggle { color: #fff; background: #232323; font-size: 1rem; padding: 10px 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 1s, opacity 1s; } .slider-toggle:hover {} .hide-toggle-button { left: 40%; opacity: 0; } .hide-slider { left: 100%; } 
         <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /> <div class="container"> <div class="left"></div> <div class="right"></div> </div> <div class="slider"></div> <div class="slider-toggle"> <span>next</span> </div>

          Something like:

            <style> .test{ overflow: hidden; background: lightgrey; } .wrapper{ min-width:300px; } .test.hide{ width: 150px; } .test.show{ min-width: 300px; } </style> <script> function change(idName) { var elem = document.getElementById(idName); if(elem.hasClass(hide)) { elem.addClass(show); elem.removeClass(hide); } else { elem.addClass(hide); elem.removeClass(show); } return false; } </script> <div style="display:none;" id="test" class="test show"> <div class="wrapper"> Подкатегории: <a href="#"> Белые комоды</a> <a href="#"> Большие</a> <a href="#"> В гостиную</a> </div> </div> <a href="#" onclick="change('test')">Ещё</a>
          • I think the author needs not to hide the text in width, but in height - so that the "More" button shows a long list - Zoltan Toth
          • I think putting styles for changes in height will not be so difficult) - Mikl
          • and if the lists are dynamic and there are a lot of them? :) - Zoltan Toth
          • Then, I think, it is worthwhile to put a scroll inside this menu overflow-y: auto; , because there may be a lot of them there and more than some height, even half of them will no longer fit into the screen) At this point, you need to build on the design. - Mikl