открытие div и смена текста в a (ссылка)
Доброго времени суток. Подскажите, плиз, что я не так в этом коде написала. Т.е. мне хотелось бы, что при нажатии на ссылку открывался div и менялся текст ссылки, а при повторном нажатии div закрывался и текст ссылки менялся на обратный. Но смена текста ссылки не происходит ((((. Мне кажется, что я как-то неправильно toggler указываю, но не могу понять, как скрипту сказать, чтобы он к ссылке это применял.
<script type="text/javascript">
function showHide(element_id) {
var obj = document.getElementById(element_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>
<a href="javascript:void(0)" onclick="showHide('block_id');return false;" id="toggler">Открыть</a><br/><br/>
<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>
<a href="javascript:void(0)" onclick="showHide('block_id_2');return false;" id="toggler">Открыть</a><br/><br/>
<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>
Спасибо за внимание. |
rognarek,
id уникально!!! |
У вас не указан 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) |
rognarek,
если блок сразу после кнопки
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.block{
display: none;
}
.open + div.block {
display: block;
}
.toggler{
margin-bottom: 12px;
display: block;
}
.toggler:after{
content: "Открыть";
}
.toggler.open:after{
content: "Закрыть";
}
</style>
<script>
function showHide(elem)
{
elem.classList.toggle("open")
}
</script>
</head>
<body>
<BUTTON onclick="showHide(this)" class="toggler"></BUTTON>
<div class="block">
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>
<BUTTON onclick="showHide(this)" class="toggler"></BUTTON>
<div class="block">
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>
</body>
</html>
|
<button>открыть</button>
<div class="block" 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>
<br>
<button>открыть</button>
<div class="block" 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>
var block = document.querySelectorAll('.block');
document.querySelectorAll('button').forEach((el,i)=>el.onclick=e=>{
var text = el.textContent;
el.textContent = text == 'открыть'?'закрыть':'открыть';
block[i].style.display = text == 'открыть'?'block':'none';
});
</script>
|
Спасибо всем большое! :thanks: :thanks: :thanks:
Цитата:
Цитата:
Цитата:
|
Подскажите еще плиз, это уже просто для интереса, если я захочу, чтобы другие открытые блоки скрывались, когда я нажимаю на открыть для скрытого блока, мне надо уже цикл прописывать, чтобы проверка шла?
|
Цитата:
|
rognarek,
мой пост посмотрите, блоков можно вставить сколько угодно |
Хорошо, спасибо.
|
| Часовой пояс GMT +3, время: 11:39. |