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

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

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

Здравствуйте. Все рецепты, что я смог найти или мне подсказали не работают.
Поэтому вынужден прибегнуть к оплате.
Нужен рабочий вариант 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

<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

<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/
Далее: все скрипты, которые мне советывали я вставлял в обработчик онлайн примера- не работает.
Если вы не согласны- залейте рабочий скрипт из ответов в онлайн обработчик, которые, как Вы говорите рабочий- я посмотрю и если он правда рабочий- я отзову вопрос.
Если нет- моя правда и я намерен купить скрипт.

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10
		1
	Куплю toggle функцию (коммерческий отдел) 06.06.2017, 22:44. Показов 829. Ответов 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 [ТС]	3
	Я не просто так написал. Вот ссылка по которой не работает совет участника форума (toggler4) не показывает box8 https://jsfiddle.net/wbr9bjgn/1/ Далее ссылка на пример форумчанена не совсем та реализация, что мне нужно https://jsfiddle.net/7sk6vzph/ Далее: все скрипты, которые мне советывали я вставлял в обработчик онлайн примера- не работает. Если вы не согласны- залейте рабочий скрипт из ответов в онлайн обработчик, которые, как Вы говорите рабочий- я посмотрю и если он правда рабочий- я отзову вопрос. Если нет- моя правда и я намерен купить скрипт. 0

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

Решение