Добро пожаловать в Forum.iCoder.Uz

Присоединяйтесь к нам сейчас, чтобы получить доступ ко всем нашим функциям. После регистрации и входа в систему вы сможете создавать темы, публиковать ответы на существующие темы, повышать репутацию других участников, получать собственный личный мессенджер и многое другое. Это также быстро и совершенно бесплатно, так чего же вы ждете?

[PHP] Скрипт спойлеров в один ряд

Информация о теме

О теме Здравствуйте, вы читаете тему Скрипт спойлеров в один ряд созданную в в разделе PHP пользователем impuLse #IT. Эта тема была просмотрена 835 раз(а), получила 1 комментариев и 1 очки реакции...
Название категории PHP
Название темы Скрипт спойлеров в один ряд
Автор темы impuLse #IT
Дата начала
Ответы
Просмотры
Количество реакций к первому сообщению
Последнее сообщение medbrb3

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
899
Реакции
449
Баллы
35
  • Автор темы
  • Администратор
  • #1
В данной теме мы хотим предложить Вам скрипт со спойлерами, расположенными по горизонтали, при клике по заголовкам которых будет отображаться скрытое содержимое данных спойлеров.


Главным отличием данного скрипта от предыдущих, помимо расположения спойлеров в один ряд, будет наличие стрелок "Вперед" и "Назад", по клику по которым будет происходить сворачивание текущего спойлера и разворачивание следующего или предыдущего спойлера в строке в зависимости от того, на какую кнопку Вы кликнули. В итоге получится что-то вроде слайдера спойлеров содержимым которых может быть что угодно, не только изображения.


Для того чтобы понять о чем идет речь и наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на заголовки спойлеров, находящихся ниже. При клике по какому-нибудь заголовку спойлера, появится его содержимое. При повторном клике - скроется. При клике по стрелкам можно будет перейти к следующему или предыдущему спойлеру в строке:

kwsmojw7827.gif


Отметим, что если был выбран последний спойлер в строке и произведен клик по стрелке "Вперед", то будет выполнен переход к первому спойлеру в данной строке. И наоборот, если был выбран первый спойлер в строке и произведен клик по стрелке "Назад", то будет выполнен переход к последнему спойлеру в данной строке.


Для реализации подобных спойлеров в одну строку (по горизонтали) Вам потребуется подключение на Вашем сайте библиотеки jQuery. Сделать это можно следующим образом:
Код:
Пожалуйста, Вход или Регистрация to view codes content!
Далее Вам необходимо будет разместить коды спойлеров и их содержимого, которые будут располагаться в одну строку:
PHP:
Пожалуйста, Вход или Регистрация to view codes content!
Так же не забываем о размещении на страничке кнопок "Вперед" и "Назад" для переключения между спойлерами одного ряда:
PHP:
Пожалуйста, Вход или Регистрация to view codes content!
Отметим, что каждой из кнопок "Вперед" и "Назад" может быть несколько на одной страничке и располагаться они могут в удобном для Вас месте. Все кнопки независимо от их расположения будут выполнять одну и ту же функцию - переход к соседнему спойлеру от выбранного в данный момент.


Далее в шапку сайта между тегами <head> и </head> необходимо добавить стили для первоначального скрытия содержимого спойлеров и правильного их отображения:
CSS:
Пожалуйста, Вход или Регистрация to view codes content!
Теперь остается лишь добавить JavaScript код, который будет показывать и скрывать содержимое спойлеров расположенных в одну строку, а так же осуществлять переходы между спойлерами при кликах по кнопкам "Вперед" и "Назад":
PHP:
Пожалуйста, Вход или Регистрация to view codes content!
Данный скрипт расположения спойлеров в один ряд будет очень полезен тем, у кого на страничке много разных данных, которые необходимо как-то систематизировать и показывать только по клику.


 

medbrb3

Пользователь
Регистрация
25.06.2021
Сообщения
1
Реакции
0
Баллы
1
Возраст
28
Пожалуйста, Вход или Регистрация to view quote content!
во-первых - копипаст
во-вторых - Для реализации подобных спойлеров в одну строку (по горизонтали) Вам потребуется подключение на Вашем сайте библиотеки jQuery. Сделать это можно следующим образом:
каким-каким? код куда вставлять?
 
shape1
shape2
shape3
shape4
shape7
shape8
Сверху Снизу