Toggle на несколько Div

@rubankreativ · Регистрация: 05.05.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте уважаемые форумчане. Я отчаялся решить вопрос и по этому прошу помощи.
У меня есть несколько Div которые я хочу переключать на одной странице.
Например:
Переключатель Toggle меняет один div на другой:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
<script type="text/javascript">
// Набор функций
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box1', this);
openbox('box2', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'inline-block') {
div.style.display = 'none';
toggler.innerHTML = 'Показать Блок2';
}
else {
div.style.display = 'inline-block';
toggler.innerHTML = 'Показать Блок1';
}
}
</script>
</head>
<body>
<div style="inline-block">Ромашки <a href="#">подробнее</a></div>
<div style="none">Гвоздики</div>
</body>

НО У МЕНЯ ТАКИХ ПАРНЫХ div 4 пары!
Как сделать, чтоб функция корректно работала, когда блоков несколько? Может нужен другой скрипт ? Или модернизировать этот и как ?
(Пока не получается на сайте мирослава-мебель.рф)
Заранее благодарен.

@Lazy_Den · 05.05.2017, 21:53

rubankreativ, У вас одна кнопка на каждую пару div?

Добавлено через 1 минуту
В разметке эти элементы сгруппированы или они находятся независимо друг от друга?

@rubankreativ · 05.05.2017, 23:43 **[ТС]**

Сообщение от Lazy_Den

rubankreativ, У вас одна кнопка на каждую пару div?

Добавлено через 1 минуту
В разметке эти элементы сгруппированы или они находятся независимо друг от друга?

У меня одна кнопка на каждую пару. Элементы не сгруппированы (не совсем понимаю что это значит). Есть только display-inline

@Lazy_Den · 05.05.2017, 23:48

Сообщение от rubankreativ

Элементы не сгруппированы

Я имел в виду, что каждая группа элементов (два div + кнопка) в отдельном родительском элементе. Что-то в этом роде:

HTML5
1
2
3
4
5
6
7
8
9
10
<div>
    <div class="box1">box11</div>
    <div class="box2">box21</div>
    <button class="toggler">toggler1</button>
</div>
<div>
    <div class="box1">box12</div>
    <div class="box2">box22</div>
    <button class="toggler">toggler2</button>
</div>

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

@rubankreativ · 06.05.2017, 09:10 **[ТС]**

Сообщение от Lazy_Den

Я имел в виду, что каждая группа элементов (два div + кнопка) в отдельном родительском элементе. Что-то в этом роде:

HTML5
1
2
3
4
5
6
7
8
9
10
<div>
    <div class="box1">box11</div>
    <div class="box2">box21</div>
    <button class="toggler">toggler1</button>
</div>
<div>
    <div class="box1">box12</div>
    <div class="box2">box22</div>
    <button class="toggler">toggler2</button>
</div>

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

У меня так: <div>
<div class="box1" style="display:inline-block">Текст box1<button class="toggler">toggler1</button></div>
<div class="box2" style="display:none">Текст box2</div>
<div class="box3" style="display:inline-block">Текст box3<button class="toggler">toggler2</button></div>
<div class="box4" style="display:none>Текст box4</div>
<div class="box5" style="display:inline-block">Текст box5<button class="toggler">toggler3</button></div>
<div class="box6" style="display:none>Текст box6</div>
<div class="box7" style="display:inline-block">Текст box7<button class="toggler">toggler4</button></div>
<div class="box8" style="display:none>Текст box8</div>
</div>
*<button> по скрипту переключает видимость блоков. <button class="toggler">toggler1</button> переключает box1 и box2
<button class="toggler">toggler2</button> переключает box3 и box4
и так далее

@Lazy_Den · 06.05.2017, 13:59

Сообщение от rubankreativ

У меня так

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

JavaScript
1
2
3
$('.toggler').on('click', function(){
    $(this).parent().hide().next().css('display', 'inline-block');
});

Вариант на чистом JS

JavaScript
1
2
3
4
5
6
7
[].forEach.call(document.querySelectorAll('.toggler'), function(el){
    el.addEventListener('click', function(){
        var parent = this.parentNode;
        parent.nextElementSibling.style.display = 'inline-block';
        parent.style.display = 'none';
    }, false);
});

@rubankreativ · 07.05.2017, 18:28 **[ТС]**

Не работает
http://xn----7sbafcubr1ahbgu1aq0q.xn--p1ai/#box1

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	05.05.2017, 21:53
	rubankreativ, У вас одна кнопка на каждую пару div? Добавлено через 1 минуту В разметке эти элементы сгруппированы или они находятся независимо друг от друга? 0

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10
	07.05.2017, 18:28 [ТС]
	Не работает http://xn----7sbafcubr1ahbgu1aq0q.xn--p1ai/#box1 0