Смена содержимого в блоке DIV

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Помогите решить вопрос.
Есть 3 кнопки и так же имеются 3 DIV блока.

<style>
div{
  display:none;
}
</style>

<input type="submit" id="button_1" value="Кнопка_1">
<input type="submit" id="button_2" value="Кнопка_2">
<input type="submit" id="button_3" value="Кнопка_3">

<div id="div_1">Блок div 1</div>
<div id="div_2">Блок div 2</div>
<div id="div_3">Блок div 3</div>

Эти блоки по умолчанию скрыты. За показ того или иного блока отвечает jquery

<script>
$("#button_1").click(function(){
  $("#div_1").toggle("slow");
  $("#div_2").hide("slow");
  $("#div_3").hide("slow");
});
$("#button_2").click(function(){
  $("#div_1").hide("slow");
  $("#div_2").toggle("slow");
  $("#div_3").hide("slow");
});
$("#button_3").click(function(){
  $("#div_1").hide("slow");
  $("#div_2").hide("slow");
  $("#div_3").toggle("slow");
});
</script>

В блока расположен один и тот же php код различие только буквально в одном слове.

Вопрос вот какой возможно ли как-то сократить код. к примеру до одного блока DIV и что бы содержимое менялось при нажатии на кнопку и если к примеру кнопка активна уже то при повторном нажатии блок DIV закрывался. Ну и конечно что бы менялось это одно слово к для примера возьмём ссылку на изображение 

<div id="div_1"><img src="https://example.com/img/НАЗВАНИЕ_ПАПКИ_1/img.phg"></div>
<div id="div_2"><img src="https://example.com/img/НАЗВАНИЕ_ПАПКИ_2/img.phg"></div>
<div id="div_3"><img src="https://example.com/img/НАЗВАНИЕ_ПАПКИ_3/img.phg"></div>

Есть какие то варианты для сокращения данного кода?

#2

РНР же по сути просто выводит строку/текст (HTML), так что можно как угодно использовать циклы и т.д., или просто функцию создать.

А в JS с 3 такими блоками можно например так

<style>
div{
  display:none;
}
</style>

<input type="submit" data-index="0" value="Кнопка_1">
<input type="submit" data-index="1" value="Кнопка_2">
<input type="submit" data-index="2" value="Кнопка_3">

<div>Блок div 1</div>
<div>Блок div 2</div>
<div>Блок div 3</div>

const blocks = $('div')

$('input').click(function() {
  const index = $(this).data('index')

  blocks.eq(index).toggle("slow")
  blocks.not(`:eq(${index})`).hide("slow")
})

https://jsfiddle.net/AlexP11223/7zymhj39/12/

2 лайка