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

#javascript #html #css

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





 Подкатегории: 
  Белые комоды  
  Большие  
  В гостиную  

 
Ещё

    

Ответы

Ответ 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;
  }



 Подкатегории: 

  Белые комоды
  
  Большие  

  В гостиную  


 



Ответ 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;
}

  Подкатегории: 
   Белые комоды  
   Большие  
   В гостиную  

  

     В гостиную  
     Белые комоды  
     Большие  
     В гостиную  
     Белые комоды  
     Большие  
     В гостиную  
     Белые комоды  
     Большие  
     В гостиную  
  





Ответ 3

Можно так -



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%;
}


  

  




  next



Ответ 4

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

   

    

       

         

         Подкатегории: 
          Белые комоды  
          Большие  
          В гостиную  
         
       

       Ещё