Поместите текст, который вы хотите, чтобы скрыть до щелчка внутри скрытый контейнер, например:
<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>
Live test case.
Edit: в случае, если у вас есть более чем один элемент, чтобы показать, вы можете использовать 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.
Updated fiddle.
Редактировать: показать его в одном контейнере, первый такой контейнер:
<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;
};
}
}
};
Вместо того, чтобы показывать связанный контейнер, вы копируете его содержимое в «основной» контейнер.
Updated jsFiddle.
, похоже, не работает в сафари? –
У вас нет Safari, но трудно поверить, что такой базовый код не будет работать.Вы получаете ошибку JS? Можете ли вы протестировать другой браузер? –
yep работает в firefox fine, weird –