Куплю toggle функцию (коммерческий отдел)

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

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

Здравствуйте. Все рецепты, что я смог найти или мне подсказали не работают.
Поэтому вынужден прибегнуть к оплате.
Нужен рабочий вариант toggle на несколько парных div.
Переключаем видимость. клику на кнопку скрываем div display: inline-block, а показываем div display:none
Конструкция такая:
<div id=1 style="display:inline-block";>Текст, который показан <button>Скрыть div id=1, показав div id=2</button></div>
<div id=2 style="display:none";>Текст, который скрыт</div>
<div id=3 style="display:inline-block";>Текст, который показан <button>Скрыть div id=3, показав div id=4</button></div>
<div id=4 style="display:none";>Текст, который скрыт</div>
<div id=5 style="display:inline-block";>Текст, который показан <button>Скрыть div id=5, показав div id=6</button></div>
<div id=6 style="display:none";>Текст, который скрыт</div>
<div id=7 style="display:inline-block";>Текст, который показан <button>Скрыть div id=7, показав div id=8</button></div>
<div id=8 style="display:none";>Текст, который скрыт</div>

Оплата после проверки работоспособности.
Заранее Вам благодарен.

@Lazy_Den · 07.06.2017, 03:53

rubankreativ, Это уже третья тема по одному и тому же вопросу. В теме, где отвечал я и во второй, где отвечали другие, вам давали абсолютно работающие варианты. Более того, вам давали ссылки на рабочие примеры в песочнице, которые по сути и являются безоговорочным доказательством работоспособности. Вы не задумывались над тем, почему у других работает, а у вас нет? Я вам подскажу. Когда задаёте конкретный вопрос, связанный с конкретной html-разметкой, то очень опрометчиво выкладывать в качестве примера код, который не то чтобы мало похож на реальный, а можно сказать, что не имеет с реальным ничего общего. Теперь ближе к сути... Вот фрагмент вашего реально html-кода, со всеми синтаксическими ошибками html, незначительными ошибками использования атрибутов и тегов, а так же грубейшими ошибками идентификации элементов:

HTML

HTML5
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="custom">
    <div class="bloki">
        <h1 class="kupetitle">Main Title</h1>
    </div>
    <div id="box1" class="box1" style="display:inline-block">
        <img class="produkt" src="/images/img.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content
            <button>
                <a id="toggler" href="#">Подробнее</a>
            </button>
        </p>
    </div>
    <div id="box2" class="box2" style="display:none;">
        <img style="border: 2px solid #ff0e0e; background: #fff;" ;="" class="produkt" src="/images/img.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content</p>
    </div>
    <div id="box3" class="box3" style="display:inline-block">
        <img class="produkt" src="/images/kuhni.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content
            <button>
                <a id="toggler" href="#">Подробнее</a>
            </button>
        </p>
    </div>
    <div id="box4" class="box4" style="display:none;">
        <img style="border: 2px solid #ff0e0e; background: #fff;" ;="" class="produkt" src="/images/img.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content</p>
    </div>
    <div id="box5" class="box5" style="display:inline-block">
        <img class="produkt" src="/images/korpus.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content
            <button>
                <a id="toggler" href="#">Подробнее</a>
            </button>
        </p>
    </div>
    <div id="box6" class="box6 " style="display:none">
        <img style="border: 2px solid #ff0e0e; background: #fff;" ;="" class="produkt" src="/images/img.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content</p>
    </div>
    <div id="box7" class="box7" style="display:inline-block">
        <img class="produkt" src="/images/deti.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content
            <button>
                <a id="toggler" href="#">Подробнее</a>
            </button>
        </p>
    </div>
    <div id="box8" class="box8 " style="display:none">
        <img style="border: 2px solid #ff0e0e; background: #fff;" ;="" class="produkt" src="/images/img.gif" alt="alt" align="left" hspace="5">
        <h1 class="kupetitle">Title</h1>
        <p>Text content</p>
    </div>
</div>

(Текстовое содержимое блоков заменено псевдоконтентом, как не имеющее к разметке отношения)
Пропустим все мелочи и начнём с главного - с того, что синтаксис и правила любого языка (не только программирования) - это основополагающая составная. Вами это было, к сожалению, проигнорировано. Атрибут id - это уникальный идентификатор элемента. Уникальный - значит единственный в своём роде. Давайте посмотрим, сколько у вас элементов с одинаковым id="toggler". Четыре! Надеюсь, что с этой проблемой понятно.
Теперь вернёмся к разметке. Закроем глаза на бессмысленный элемент <a>, который только портит общую картину и добавляет "дёрганья" странице. В коде вашего вопроса, у кнопки непосредственный родительский элемент - это тот <div>, который принимает непосредственное участие в сценарии. А в реальном коде, у кнопки непосредственный родительский элемент <p>, а уже только потом - нужный вам <div>. Не буду задерживаться на элементе <h1>, но почитайте о рациональном его использовании. А так же обратите внимание на то, что атрибуты hspace, align и многие другие, осуждаются еще в HTML4, а сейчас на дворе HTML5.
Ну и конечно же, я попробую еще раз предложить вариант решения вашей проблемы. Только теперь расширю его более валидной html-разметкой.

HTML

HTML5
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="custom">
    <div class="bloki">
        <div class="kupetitle">Main Title</div>
    </div>
    <div class="inline-box">
        <img class="produkt" src="/images/kupe.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Text content
            <button>Подробнее</button>
        </p>
    </div>
    <div class="hidden-box">
        <img class="produkt bordered" src="/images/kupe.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Hidden text content</p>
    </div>
    <div class="inline-box">
        <img class="produkt" src="/images/kuhni.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Text content
            <button>Подробнее</button>
        </p>
    </div>
    <div class="hidden-box">
        <img class="produkt bordered" src="/images/kuhni.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Hidden text content</p>
    </div>
    <div class="inline-box">
        <img class="produkt" src="/images/korpus.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Text content
            <button>Подробнее</button>
        </p>
    </div>
    <div class="hidden-box">
        <img class="produkt bordered" src="/images/korpus.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Hidden text content</p>
    </div>
    <div class="inline-box">
        <img class="produkt" src="/images/deti.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Text content
            <button>Подробнее</button>
        </p>
    </div>
    <div class="hidden-box">
        <img class="produkt bordered" src="/images/deti.gif" alt="Image alt">
        <div class="kupetitle">Title</div>
        <p>Hidden text content</p>
    </div>
</div>

JavaScript
1
2
3
$('button').on('click', function(){
    $(this).closest('div').hide().next().show();
});

Если вы посмотрите на этот код и сравните его с предлагаемыми ранее, то увидите разницу в один метод: parent() и closest(). Это я возвращаюсь к тому, с чего начал - показывайте реальный код и проблема будет решаться гораздо быстрее.

Добавлено через 20 минут
P.S. Вышесказанное было конструктивной критикой и думаю, что именно так вы к ней и отнесётесь. Но не могу удержаться от доли нотаций с напутствиями. Далеко не я один, видя ответ в стиле: "Не работает", попросту игнорирует дальнейшую дискуссию. Вам пытаются помочь, но это не значит, что помогающие должны включать все свои телепатические ресурсы. Посему, советую в свою очередь помогать тем, кто помогает вам - давать исчерпывающую информацию о проблеме. Если вы не получили в ответ ни одного дополнительного вопроса, а сразу решение, то считайте, что ваша миссия была выполнена на все 100%

@rubankreativ · 07.06.2017, 09:43 **[ТС]**

Я не просто так написал. Вот ссылка по которой не работает совет участника форума (toggler4) не показывает box8
https://jsfiddle.net/wbr9bjgn/1/
Далее ссылка на пример форумчанена не совсем та реализация, что мне нужно
https://jsfiddle.net/7sk6vzph/
Далее: все скрипты, которые мне советывали я вставлял в обработчик онлайн примера- не работает.
Если вы не согласны- залейте рабочий скрипт из ответов в онлайн обработчик, которые, как Вы говорите рабочий- я посмотрю и если он правда рабочий- я отзову вопрос.
Если нет- моя правда и я намерен купить скрипт.

Новые блоги и статьи Все статьи Все блоги /
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10

	Куплю toggle функцию (коммерческий отдел) 06.06.2017, 22:44. Показов 908. Ответов 2 Метки нет (Все метки) Здравствуйте. Все рецепты, что я смог найти или мне подсказали не работают. Поэтому вынужден прибегнуть к оплате. Нужен рабочий вариант toggle на несколько парных div. Переключаем видимость. клику на кнопку скрываем div display: inline-block, а показываем div display:none Конструкция такая: <div id=1 style="display:inline-block";>Текст, который показан <button>Скрыть div id=1, показав div id=2</button></div> <div id=2 style="display:none";>Текст, который скрыт</div> <div id=3 style="display:inline-block";>Текст, который показан <button>Скрыть div id=3, показав div id=4</button></div> <div id=4 style="display:none";>Текст, который скрыт</div> <div id=5 style="display:inline-block";>Текст, который показан <button>Скрыть div id=5, показав div id=6</button></div> <div id=6 style="display:none";>Текст, который скрыт</div> <div id=7 style="display:inline-block";>Текст, который показан <button>Скрыть div id=7, показав div id=8</button></div> <div id=8 style="display:none";>Текст, который скрыт</div> Оплата после проверки работоспособности. Заранее Вам благодарен. 0

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10
	07.06.2017, 09:43 [ТС]
	Я не просто так написал. Вот ссылка по которой не работает совет участника форума (toggler4) не показывает box8 https://jsfiddle.net/wbr9bjgn/1/ Далее ссылка на пример форумчанена не совсем та реализация, что мне нужно https://jsfiddle.net/7sk6vzph/ Далее: все скрипты, которые мне советывали я вставлял в обработчик онлайн примера- не работает. Если вы не согласны- залейте рабочий скрипт из ответов в онлайн обработчик, которые, как Вы говорите рабочий- я посмотрю и если он правда рабочий- я отзову вопрос. Если нет- моя правда и я намерен купить скрипт. 0

Куплю toggle функцию (коммерческий отдел)

Решение