Скрыть показать несколько блоков по-отдельности

Question

Не получается решить проблему скрыть/показать блока на jquery + css когда их несколько на странице. помогите, пожалуйста

$(document).ready(function(){
    
    $('.button').click(function(){

        $('.block').toggleClass('opener');
        $('.button').css({"display":"none"});
    });

});

.block {
  height: 50px;
  overflow: hidden;
  position: relative;
}
.block.opener {
  height: auto;
}
.block:after {
  content: "";
  width: 100%;
  left: 0;
  position: absolute;
  height: 40px;
  bottom: 0;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.block.opener:after {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. </div>
<a href="#" class="button">Показать</a>

<hr>

<div class="block">
 Второй блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстом</div>
<a href="#" class="button">Показать</a>

Answer 1

Вам нужно использовать контекст this, который указывает на конкретный элемент, на который кликнули

$(document).ready(function(){    
    $('.button').click(function(){
        $(this).prev('.block').toggleClass('opener');
        $(this).css({"display":"none"});
    });
});

.block {
  height: 50px;
  overflow: hidden;
  position: relative;
}
.block.opener {
  height: auto;
}
.block:after {
  content: "";
  width: 100%;
  left: 0;
  position: absolute;
  height: 40px;
  bottom: 0;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.block.opener:after {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. </div>
<a href="#" class="button">Показать</a>

<hr>

<div class="block">
 Второй блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстомВторой блок  с болшьим текстом</div>
<a href="#" class="button">Показать</a>

Answer 2

Чтобы сильно не привязывать логику работы к структуре DOM лучше оберните пары блок-кнопка в какой-нибудь .block-wrapper и работайте внутри него.

$('.button').click(function(){        
    $(this).toggle(false)
        .closest('.block-wrapper')
           .find('.block').addClass('opener');
});

работать надо также в контексте нажатой кнопки $(this).

Если менять структуру DOM нельзя, то prev('.block')

Answer 3

И зачем вам jQuery для такого?

addEventListener(`click`, e => {
  if (!(e.target instanceof HTMLAnchorElement) || !e.target.classList.contains(`block-toggler`)) return;
  e.preventDefault();
  e.target.previousElementSibling.classList.toggle(`opener`);
});

.block {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.block.opener {
  height: auto;
}

.block:after {
  content: "";
  width: 100%;
  left: 0;
  position: absolute;
  height: 40px;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.block.opener:after {
  opacity: 0;
}

<div class="block">
  Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый
  блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом. Первый блок с большим текстом.
</div>
<a href="#" class="button block-toggler">Показать</a>

<hr>

<div class="block">
  Второй блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим
  текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстомВторой блок с болшьим текстом
</div>
<a href="#" class="button block-toggler">Показать</a>

БЛОГ НА HUSL

Скрыть показать несколько блоков по-отдельности

Ответы (3 шт):