Вы здесь
Главная > Мой блог > WEB-разработка > Раскрывающиеся блоки (div) на JavaScript

Раскрывающиеся блоки (div) на JavaScript

Замечательные горизонтальные раскрывающиеся блоки. Применять можно где угодно и для чего угодно. Демо
1. CSS

2. JavaScript
Данный код вставляем перед закрывающим тегом </head>.

2.1 Подключение JavaScript
В тег <body> добавляем onload=”slider(‘slider’,0)” получая следующее:

Это необходимо для того, чтобы вся конструкция заработала так, как надо.
3. HTML

P.S.
В приведенном выше коде используется лишь три выпадающих блока, но их можно сделать любое количество, для этого нужно взять код блока:

 

Заменить в строках id=”1-header” и id=”1-content” цифру 1 (в данном случае) на порядковый номер блока.

Демо

Скажите, а как видоизменить, чтобы предыдущий блок не закрывался сам?

Найти строку

И заменить её на

 

8 thoughts on “Раскрывающиеся блоки (div) на JavaScript

  1. Скажите пожалуйста, а если сайт сделан на php и раскрывающихся блоков будет изменяться по мере поступления информации, можно id=”1-header” id=”2-header” и т д сделать их одинаковыми для всех, чтоб был один код в HTML для всех блоков

    1. Вячеслав, id у каждого блока должен быть уникальным, поэтому одинаковый идентификатор недопустим, так как при нажатии на один header будут раскрываться сразу несколько контентов.
      А так как у Вас сайт написан на php Вы можете легко делать перебор всех данных, которые хотите вывести в данной “гармошке” (не имеет значения сколько их у Вас) и присваивать им “id=i++;”.

  2. Саламалейкум Дмитрий. Помогите мне пожалуйста. Я очень долго не мог сделать это. Дело в том что я хочу сделать так как в youtube ( не только на этом сайте есть такое).
    Как сделать так чтоб первый блок не был скрыт, а показывал. Но когда я кликую на другие он скрывался.(Все остальное оставался также). Я все объясню если не поняли меня. У меня словарный запас очень маленький никак не могу объяснить. Я постараюсь ты только ответь пожалуйста

    1. Здравствуйте Аслан, для этого необходимо заменить строку 22, где написано:

      div.style.display = ‘block’;

      на

      if(i == 1) {div.style.display = ‘block’;} else {div.style.display = ‘none’;}

  3. Наверное я не смог Вам объянить но так как вы сказали не получилось. И япоменял убрал на 21 строке showfirst == 1 && и 1див показывает так как я хотел. Но все равно не то. когда занова кликаеш на ссылку я не хочу чтоб она закрывалась. Спасибо за все! Помогите мне пожалуйста это сделать. Я на сайте сделал почти что хотел но все равно это не то. я там что то закалдовал и у меня почти получилось но я уже забыл как я это сделал. я оставил так как есть давно. Но я все равно хочу это сделать. я вам отправлю скриншот как я хочу сделать

    1. Необходимо заменить body onload=”slider(‘slider’,0)” на body onload=”slider(‘slider’,1)” и будет работать

    1. Необходимо заменить body onload=”slider(‘slider’,0)” на body onload=”slider(‘slider’,1)” и будет работать
      Где вместо единицы вписать необходимый блок

Добавить комментарий

Top