Отображение нужного блока по нажатию на кнопку

173

27 декабря 2021, 07:50

Имеются кнопки и идущие за ними блоки. У кнопок одинаковый класс и у блоков также. Как сделать чтобы при нажатии на кнопку открывался следующий за ней блок.

<button class="portfolio_work_btn"></button>
 <div class="site-example"></div>
<button class="portfolio_work_btn"></button>
 <div class="site-example"></div>
<button class="portfolio_work_btn"></button>
 <div class="site-example"></div>
<button class="portfolio_work_btn"></button>
 <div class="site-example"></div>

Блоки изначально скрыты display:none;

$('.portfolio_work_btn').click(() => {
        $(this)+$('.site-example').show(500);
    });

Выводит последний блок. Помогите как выбрать только следующий. Или каждую кнопку именовать своим классом и каждый блок также своим именем, а затем на каждую кнопку вешать CLICK. Заранее спасибо за советы.

Answer 1

Например так. Если брать данную вёрстку которую Вы предоставили. Код на Jquery.

var btns = $('.portfolio_work_btn'); 
var conts = $('.site-example'); 
 
btns.click(function() { 
  conts.removeClass('active'); 
  var content = $(this).next(); 
  content.addClass('active'); 
});

.site-example { 
  display: none; 
} 
 
.active { 
  display: block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="portfolio_work_btn">1</button> 
 <div class="site-example">11</div> 
 
<button class="portfolio_work_btn">2</button> 
 <div class="site-example">22</div> 
 
<button class="portfolio_work_btn">3</button> 
 <div class="site-example">33</div> 
 
<button class="portfolio_work_btn">4</button> 
 <div class="site-example">44</div>