Урок 27
Раскрывающийся (выпадающий) текст при клике на ссылку или
картинку
Вставляем в HEAD:
<script type="text/javascript">
/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated
Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var
enablepersist="on" //Enable saving state of content
structure using session cookies? (on/off)
var
collapseprevious="no" //Collapse previously open content
when opening present? (yes/no)
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function
getElementbyClass(classname){
ccollect=new
Array()
var inc=0
var alltags=document.all?
document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length;
i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}
function
contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function
expandcontent(cid){
if (typeof
ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")?
"block" : "none"
}
}
function
revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1;
i++)
document.getElementById(selectedComponents[i]).style.display="block"
}
function
get_cookie(Name) {
var search =
Name + "="
var
returnvalue = "";
if (document.cookie.length
> 0) {
offset =
document.cookie.indexOf(search)
if (offset !=
-1) {
offset +=
search.length
end =
document.cookie.indexOf(";", offset);
if (end ==
-1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,
end))
}
}
return
returnvalue;
}
function
getselectedItem(){
if (get_cookie(window.location.pathname)
!= ""){
selectedItem=get_cookie(window.location.pathname)
return
selectedItem
}
else
return ""
}
function
saveswitchstate(){
var inc=0,
selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}
document.cookie=window.location.pathname+"="+selectedItem
}
function
do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on"
&& typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1"
: uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)?
1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
if (enablepersist=="on"
&& document.getElementById)
window.onunload=saveswitchstate
</script>
Вставляем в тело где необходимо:
<h3 onclick="expandcontent('sc1')"
style="cursor:hand; cursor:pointer">Вариант №1</h3>
<div id="sc1" class="switchcontent">А
дождь идёт, а дождь идёт,
Как наваждение.
Играет гейша в кимоно
На сямисэне.
А в это время чёт-нечёт
Играют в кости.
Из чашек маленьких саке
Пьют гости.
А я сижу одна из них,
И равнодушная
Луна меняет жёлтый лик
В воде послушной.
А дождь идёт, а дождь идёт,
Саке и грёзы.
Сегодня инь, а завтра ян,
Метаморфозы.</div>
<h3 onclick="expandcontent('sc2')"
style="cursor:hand; cursor:pointer">Вариант №2</h3>
<div id="sc2" class="switchcontent">Тяжкий
груз багровых веток,
Хруст безжизненной осоки...
Через дождик – струи света
Как зачёркнутые строки.
Над Россией плачет осень,
Городки погрязли в хляби.
На пруду, как на подносе,
Павший лист в узорах ряби.
Плеск петляющей речушки,
Словно тихий вздох дочерний…
А в подлатанной церквушке
Всё готово для вечерни.
</div>
<h3 onclick="expandcontent('sc3')"
style="cursor:hand; cursor:pointer">Вариант №3</h3>
<div id="sc3" class="switchcontent">Север
мой, он снится мне ночами,
Вся его лесная красота,
Где своими синими очами
Смотрят в небо Ижма и Ухта,
Где, забыв закаты и рассветы,
Солнце не ложится летом спать,
Там осталась мною не воспета
Белых рощ берёзовая стать.
Там, среди раздолья колдовского
Белых и нехоженых снегов,
Я в краю таёжном и суровом,
Повстречала первую любовь.
В том краю оставила я сердце,
Но туда вернуться не дано…
Мне нигде душою не согреться,
А перед глазами лишь одно:
Дом родной, крылечко в пять ступенек,
Мимо громыхают поезда…
Только никаких не хватит денег,
Чтоб вернуть ушедшие года.
Время, что неслышно ускользает,
Беспощадный заметает снег,
И ночами горестно вздыхает
Старый дом, как старый человек.
Сны мои до боли мне знакомы:
Вот года рассеялись, как дым,
И выходит девушка из дома
С маминым лицом, но молодым,
И зовёт меня, чтоб я вернулась,
Чтоб жила в родимой стороне…
Там моя покинутая юность
Неутешно плачет обо мне…
Край родной, ты снишься мне ночами…</div>
Пример работы
Вариант №1
А дождь идёт, а дождь идёт,
Как наваждение.
Играет гейша в кимоно
На сямисэне.
А в это время чёт-нечёт
Играют в кости.
Из чашек маленьких саке
Пьют гости.
А я сижу одна из них,
И равнодушная
Луна меняет жёлтый лик
В воде послушной.
А дождь идёт, а дождь идёт,
Саке и грёзы.
Сегодня инь, а завтра ян,
Метаморфозы.
Вариант №2
Тяжкий груз багровых веток,
Хруст безжизненной осоки...
Через дождик – струи света
Как зачёркнутые строки.
Над Россией плачет осень,
Городки погрязли в хляби.
На пруду, как на подносе,
Павший лист в узорах ряби.
Плеск петляющей речушки,
Словно тихий вздох дочерний…
А в подлатанной церквушке
Всё готово для вечерни.
Вариант №3
Север мой, он снится мне ночами,
Вся его лесная красота,
Где своими синими очами
Смотрят в небо Ижма и Ухта,
Где, забыв закаты и рассветы,
Солнце не ложится летом спать,
Там осталась мною не воспета
Белых рощ берёзовая стать.
Там, среди раздолья колдовского
Белых и нехоженых снегов,
Я в краю таёжном и суровом,
Повстречала первую любовь.
В том краю оставила я сердце,
Но туда вернуться не дано…
Мне нигде душою не согреться,
А перед глазами лишь одно:
Дом родной, крылечко в пять ступенек,
Мимо громыхают поезда…
Только никаких не хватит денег,
Чтоб вернуть ушедшие года.
Время, что неслышно ускользает,
Беспощадный заметает снег,
И ночами горестно вздыхает
Старый дом, как старый человек.
Сны мои до боли мне знакомы:
Вот года рассеялись, как дым,
И выходит девушка из дома
С маминым лицом, но молодым,
И зовёт меня, чтоб я вернулась,
Чтоб жила в родимой стороне…
Там моя покинутая юность
Неутешно плачет обо мне…
Край родной, ты снишься мне ночами…
