Как вывести только часть блоков?

336

28 июля 2017, 02:06

Всем здравствуйте!

Необходимо первоначально при загрузке сайта на странице выводить только три блока .related, а при нажатии на блок .add выводить остальные семь блоков .related, и при этом блок .add прятать.

Возможно ли это сделать с помощью jQuery? Благодарю!

.related { 
display: block; 
height: 30px; 
width: 300px; 
margin-bottom: 3px; 
background-color: chocolate; 
color: white; 
} 
.add { 
cursor: pointer; 
}

<div class="related">1 блок</div> 
<div class="related">2 блок</div> 
<div class="related">3 блок</div> 
<div class="related">4 блок</div> 
<div class="related">5 блок</div> 
<div class="related">6 блок</div> 
<div class="related">7 блок</div> 
<div class="related">8 блок</div> 
<div class="related">9 блок</div> 
<div class="related">10 блок</div> 
<div class="add">Показать остальные 7</div>

Answer 1

Скройте в css все .related, кроме первых 3х и отображайте их по клику на .add, например, через .show(), а .add, соответственно, скрывайте через .hide():

$('.add').on('click', function() { 
  $(this).hide(); 
  $('.related').show(); 
});

.related { 
  display: block; 
  height: 30px; 
  width: 300px; 
  margin-bottom: 3px; 
  background-color: chocolate; 
  color: white; 
} 
 
.block .related:nth-child(n+4) { 
  display: none; 
} 
 
.add { 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <div class="related">1 блок</div> 
  <div class="related">2 блок</div> 
  <div class="related">3 блок</div> 
  <div class="related">4 блок</div> 
  <div class="related">5 блок</div> 
  <div class="related">6 блок</div> 
  <div class="related">7 блок</div> 
  <div class="related">8 блок</div> 
  <div class="related">9 блок</div> 
  <div class="related">10 блок</div> 
</div> 
<div class="add">Показать остальные 7</div>