Zachciało mi się zrobić tak, żeby pewien fragment strony można było zwinąć i rozwinąć w zależności od preferencji użytkownika. Na przykład mamy formularz i pod każdym ważniejszym polem jest opis, co należy w to pole wprowadzić (taki idiot-instruction). Domyślnie (przy załadowaniu strony) takie opisy są zwinięte. Ale jeśli ktoś nie wie, o co biega to sobie klika "rozwiń" i ma śliczny opis.
Użyłem takiego kodu JS - przyznam od razu i bez bicia, że zerżnięty skądś:
- Kod: Zaznacz cały
function expand_collapse(expand)
{
if(expand)
{
document.getElementById('contents').style.display = 'block';
document.getElementById('expand').innerHTML='[<a onclick="expand_collapse(false); return false;" href="#">ukryj</a>]';
}
else
{
document.getElementById('contents').style.display = 'none';
document.getElementById('expand').innerHTML='[<a onclick="expand_collapse(true); return false;" href="#">pokaż</a>]<br /><br />';
}
}
Wszystko gra i buczy, pod obiema przeglądarkami (FF i IE) i chyba nawet jest zgodne ze standardami W3C.
Tylko, że to fajnie działa, gdy ma się tylko jeden obszar do zwijania / rozwijania. Gdybym chciał mieć ich więcej - jak w przykładzie formularza opisywanym we wstępie - to musiałbym dla każdego fragmentu i klawisza "zwiń / rozwiń" definiować inne id (unikalne, np. "info1_contents", "info1_expand", "info2_contents", "info2_expand", itd.). Oraz dla każdego robić osobną funkcję JS.
Aby tego uniknąć chciałem wprowadzić dodatkowy parametr "nazwa", który by mówił funkcji, co do którego id ma dokonywać zmian. W moim zamyśle funkcja taka wyglądałaby tak:
- Kod: Zaznacz cały
function expand_collapse(name, expand)
{
if(expand)
{
document.getElementById(name + '_contents').style.display = 'block';
document.getElementById(name + '_expand').innerHTML='[<a onclick="expand_collapse(\'' + name + '\', false); return false;" href="#">ukryj</a>]';
}
else
{
document.getElementById(name + '_contents').style.display = 'none';
document.getElementById(name + '_expand').innerHTML='[<a onclick="expand_collapse(\'' + name + '\', true); return false;" href="#">pokaż</a>]<br /><br />';
}
}
Jednakże to nie działa. Dostaję błędy typu, że obiekt "name +'_expand'" nie ma żadnych właściwości.
Nie ukrywam - jestem cienias z JS. Dlatego, gdy wszystkie próby będące w zasięgu mojej wiedzy zawiodły, postanowiłem tu napisać. Być może ktoś będzie wiedział, co robię źle i będzie w stanie mi pomóc?
Z góry dziękuję i pozdrawiam!