Поместите текст, который вы хотите скрыть, до щелчка внутри скрытого контейнера, например:
<div id="HiddenTextContainer" style="display: none;">
Hello, I will become visible when you click something else
</div>
Следующий шаг - добавить этот код JavaScript на страницу, например, внутри секции <head>:
function ShowHiddenText() {
document.getElementById("HiddenTextContainer").style.display = "block";
}
И, наконец, такой код:
<span onclick="ShowHiddenText();">click me to show hidden text</span>
Тестовый пример .
Редактировать : на случай, если вы получилидля отображения более одного элемента вы можете использовать атрибут rel:
<span rel="HiddenTextContainer2">click me to show second hidden text</span><br />
Затем, используя чистый JavaScript, выполнить итерацию по всем элементам с этим атрибутом и назначить их onclick программно:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
oToShow.style.display = "block";
};
}
}
};
При нажатии отображается элемент с идентификатором, равным значению rel.
Обновленная скрипта .
Редактировать :чтобы показать его в одном контейнере, сначала нужно иметь такой контейнер:
<div id="HiddenTextContainer"></div>
Не нужно скрывать его, так как он изначально пустой, затем измените код на:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML;
};
}
}
};
Вместопоказывая связанный контейнер, вы копируете его содержимое в «основной» контейнер.
Обновлен jsFiddlе .