Раскрытие текста (что то типа спойлера)

[a1rborn]

Заранее извиняюсь за тупое название темы) просто без понятия как это правильно называется

Проблема такая:

На фан сайте музыкального исполнителя, есть страница тексты песен. Хочу реализовать следующую вещь: есть строки

ххх

ууу

еее

это названия песен, что бы при нажатии на них, развертывалось окно, желательно под названием, и там был текст песни

Это что то типа спойлера на форумах или, к примеру, как разворачивается текст песни в вконтакте

Линками куда-то и новыми страницами категорически нельзя пользоваться.

Буду рад за любую помощь!

Если не ясно объяснил, скажите, попробую иначе)

[wwt]

что-то типо http://jsfiddle.net/wwt999/JPn8b/

[vanok]

.

Edited October 19, 2012 by vanok

[wwt]

http://jsfiddle.net/wwt999/JPn8b/3/

[vanok]

.

Edited October 19, 2012 by vanok

[a1rborn]

Спасибо за предложенный вариант, буду пробовать

Если у кого то есть еще мысли или , возможно, линки где рассказывается как реализовать подобные вещи - буду благодарен)

[vanok]

.

Edited October 19, 2012 by vanok

[a1rborn]

kk благодарю)

[wwt]

Так же все

Может Вам целиком код страницы дать?

http://jsfiddle.net/JPn8b/5/ тут вроде даже срабатывает скрипт, но все равно переадресует на другую страницу

a href нужно как-то изменить наверное?

у вас на странице сыпет ошибки в консоль потому другие скрипты и не работают. проверяйте ваш javascript код существующий.

Плюс у вас уже подключена jquery к странице значит можно сделать так: http://jsfiddle.net/wwt999/uPRg9/

[vanok]

.

Edited October 19, 2012 by vanok

[a1rborn]

Хм, все сделал вроде правильно, но

в хроме, при вызове консоли js под строкой

document.getElementById("link").onclick = function(){

пишет ошибку

uncaught typeerror cannot set property 'onclick' of null

в js пока не очень шарю, не могли бы подсказать куда двигаться?

или в чем собственно проблема?

PS да и скрипт потому не работает

PSS Проверил весь код (html css js) на jsfiddle

Там все работает, то есть панель раскрывается

У меня же на локальном сервере нет

Edited October 19, 2012 by a1rborn

[wwt]

Хм, все сделал вроде правильно, но

в хроме, при вызове консоли js под строкой

document.getElementById("link").onclick = function(){

пишет ошибку

uncaught typeerror cannot set property 'onclick' of null

в js пока не очень шарю, не могли бы подсказать куда двигаться?

или в чем собственно проблема?

PS да и скрипт потому не работает

PSS Проверил весь код (html css js) на jsfiddle

Там все работает, то есть панель раскрывается

У меня же на локальном сервере нет

http://jsfiddle.net/dJdUA/

[a1rborn]

Хм, все сделал вроде правильно, но

в хроме, при вызове консоли js под строкой

document.getElementById("link").onclick = function(){

пишет ошибку

uncaught typeerror cannot set property 'onclick' of null

в js пока не очень шарю, не могли бы подсказать куда двигаться?

или в чем собственно проблема?

PS да и скрипт потому не работает

PSS Проверил весь код (html css js) на jsfiddle

Там все работает, то есть панель раскрывается

У меня же на локальном сервере нет

http://jsfiddle.net/dJdUA/

Нет, моя проблема не решается добавлением

window.onload = function(){...}

Хотя решил я ее просто подставив в сам html скрипт, а линк на js файл удалил.

Но это не то что мне нужно

Т.к. текста в будет достаточно много, мне нужно реализовать именно link на js файл, а не вставлять сам скрипт в html

Но так у меня не работает

линк на js указан правильно, в пути проблем быть не может

т.к. заменив содержимое js файла на, к примеру

alert(1);

скрипт выполняется

где бы он не находился, будь то в head или в body.

а вот предложенный Вами вариант - не работает

В чем может быть проблема?

Проблему решил

Все как всегда оказалось намного проще, нежели я мог подумать

Просто после последней закрывающей скобки } у меня была пустая строка

Видимо из за этого скрипт не выполнялся.

Теперь все нормально, и не имеет разницы стоит он в head или в body

Спасибо еще раз за предложенный вами вариант

Edited October 19, 2012 by a1rborn

[a1rborn]

Появился еще один вопрос

Как уже мною было озвучено выше, я делаю страницу с текстами песен

И таких ячеек с текстом, созданных по средствам скрипта, предложенного пользователем WWT должно быть x>1 штук

Получается мне нужно для каждой песни, создавать отдельный js файл с разными id в html что бы это можно было реализовать

Или есть какой то более простой способ

Извиняюсь за свое незнание, сейчас js только в процессе изучения)

[moron]

Получается мне нужно для каждой песни, создавать отдельный js файл с разными id в html что бы это можно было реализовать

Вот мой вариант: http://jsfiddle.net/mj7fM/ В нем событие вешается на общий блок-обёртку с ид music и с помощью делегирования определяется элемент, на котором сработало событие: если это заголовок - след. блок получает атрибут(или свойство...) display block. Кол-во заголовков и песен может быть неограниченно большим, 1 обработчик

Edited October 19, 2012 by moron

[a1rborn]

Ну в принципе то что нужно,

благодарю за решение)

[a1rborn]

Очень понравился именно ваш способ создания спойлера

Но у меня он не выполняется, после первой строки js выдает ошибку:

uncaught typeerror cannot set property 'onclick' of null

С чем это может быть связано?

Решил проблему подставив

window.onload = function(){}

Извиняюсь

[Int]

Ошибка та была, видимо, потому что у тебя на странице не было элемента с указанным id