как с помощью jQuery свернуть один блок div и сразуже развернуть другой

306

24 февраля 2018, 20:16

Подскажите пожалуйста как с помощью jQuery свернуть один блок div и сразуже развернуть другой потом наоборот. Это действие должно происходить по нажатию на ссылку например

<div id="div1"> 
   <a href="#">скрыть div1 и показать div2</a> 
</div>
<div id="div2"> 
   <a href="#">скрыть div2 и показать div1</a> 
</div>

Answer 1

$('#div1').on('click', function(){ 
  $('#div1').fadeOut(300, function(){ 
    $('#div2').fadeIn(300); 
  }); 
}); 
 
$('#div2').on('click', function(){ 
  $('#div2').fadeOut(300, function(){ 
    $('#div1').fadeIn(300); 
  }); 
});

#div2{ 
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="div1">  
   <a href="#">скрыть div1 и показать div2</a>  
</div> 
 
<div id="div2">  
   <a href="#">скрыть div2 и показать div1</a>  
</div>

Answer 2

1. Вариант с toggle() - отображает или скрывает выбранные элементы

$('.toggle').on('click', function() { 
  $(".toggle").toggle(); 
});

.toggle { 
  display: none; 
} 
 
.toggle:nth-child(1) { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <div class="toggle"> 
    <a href="#">скрыть div1 и показать div2</a> 
  </div> 
 
  <div class="toggle"> 
    <a href="#">скрыть div2 и показать div1</a> 
  </div> 
</div>

2. Вариант с slideToggle() - отображает или скрывает выбранные элементы со скользящим движением (по сути тот же toggle())

$('.toggle').on('click', function() { 
  $(".toggle").slideToggle(); 
});

.toggle { 
  display: none; 
} 
 
.toggle:nth-child(1) { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <div class="toggle"> 
    <a href="#">скрыть div1 и показать div2</a> 
  </div> 
 
  <div class="toggle"> 
    <a href="#">скрыть div2 и показать div1</a> 
  </div> 
</div>