При нажатии на кнопку, открывался определенный блок с информацией?

Question

[Андрей Dobrin]

Представьте, у меня есть кнопка:
HTML

<span>Узнать подробнее...
</span>

CSS

span{
      position: absolute;
      color: #DF293E;
      font-weight: 800;
      background-color: #fff;
      -webkit-border-radius: 5px;
              border-radius: 5px;
      width: auto;
      height: auto;
      cursor: pointer;
      right: 10%;
      display: none;
}

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

новостной_блок:hover > span{
      display: block;
}

Я написал скрипт на jquery, но только при нажатии на это кнопку, у меня открывались все блоки одноверменно.
То есть, мне нужно, чтоб при нажатии на неё открывался только тот блок, который я нажал и чтоб после второго нажатия закрывался и т.д. Спасибо за помощь!

Answer 1

[Exploding]

Может просто:

<details>
	<summary class='btn'>Узнать подробнее...</summary>
	<div class="content_wrapper">Представьте, у меня есть кнопка</div>
</details>

Ну или же вариант Slv_Ivn, только чуть изменить, чтобы закрывалось:

$('.btn').click(function(){
	$(this).parent('.box').toggleClass('active');
});

Comments

[ibra123]

а как сделать чтоб она изначально была закрытой

[Exploding]

ibra123, не добавлять класс active

Answer 2

[frees2]

<button  data-toggle-id="su">
  Показать
</button>

<form id="su" hidden>
скрыть
</form>

   
  <script> 
document.onclick = function(event) { var target = event.target;  var id = target.getAttribute('data-toggle-id');
if (!id) return;
var elem = document.getElementById(id);
elem.hidden = !elem.hidden;
  };
 </script>

Answer 3

[Slv_Ivn]

Ну, как вариант — https://codepen.io/anon/pen/oqdZeK