Как при клике показать другую половину div?

364

26 ноября 2016, 18:40

Добрый день! Как сделать, что при начальном состоянии показывалось 50% этого div, а после нажатия на кнопку показывалась другие 50%?

<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>

Answer 1

Если допускается использование jquery, то можно так:

$(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>

Answer 2

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>

Answer 3

Что нибудь вроде:

   <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>

Answer 4

Можно так -

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>