У вас не указан toggler, у каждого блока должен быть свой.
<html>
<head>
<meta charset="utf-8">
<style>
hr {
all: unset;
height: 30px;
display: block;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="showHide('block_id','toggler_1');return false;" id="toggler_1">Открыть</a>
<div id="block_id" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<hr>
<a href="javascript:void(0)" onclick="showHide('block_id_2','toggler_2');return false;" id="toggler_2">Открыть</a>
<div id="block_id_2" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<script>
function showHide(element_id, toggler_id) {
var obj = document.getElementById(element_id);
var toggler = document.getElementById(toggler_id);
if(document.getElementById(element_id)) {
if(obj.style.display != "block") {
obj.style.display = "block";
toggler.innerHTML = 'Закрыть';
return;
} else
obj.style.display = "none";
toggler.innerHTML = 'Открыть';
} else
alert("Элемент с id: " + element_id + " не найден!");
}
</script>
</body>
</html>
Немного о том, как можно упростить. Ведь когда будет много таких блоков, это будет сложно поддерживать. В спецификации HTML 5.2 определён элемент details, который представляет собой раскрывающийся виджет, из которого пользователь может получить дополнительную информацию или элементы управления.
Ваш пример с элементом details:
<html>
<head>
<meta charset="utf-8">
<style>
summary::after {
content: "Открыть";
}
details {
margin-bottom: 30px;
}
details[open] summary::after {
content: "Закрыть";
}
</style>
</head>
<body>
<details>
<summary></summary>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</details>
<details>
<summary></summary>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</details>
</body>
</html>
ОСТОРОЖНО! Первый пример содержит неправильное использование элемента HTML, а именно ссылки (элемент A). Текст ссылки гласит ― Открыть, что может ввести пользователя в заблуждение. И действительно, пользователь видит перед собой ссылку, он может её перетащить в другое окно, добавить в закладки, в контекстном меню выбрать Открыть в новой вкладке, однако его действия завершатся неудачей, поскольку будет открыта пустая вкладка.
В таком случае лучше использовать кнопку (элемент BUTTON)