Hide-show с data атрибутами

@rav41k · Регистрация: 11.01.2016

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

Здравствуйте,скажите как сделать обычный slideToggle по клику например на аттрибут data-id="0" ,в одном диве, появлялся блок с тем же data-id="0",но в другом диве? Соотвественно и с другими data-id номерами та же работа.. Код предоставил ниже

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
<div class="contact">
    <div class="info">
      <div class="box" data-id="0">
        <button class="btn">button1</button>
      </div>
      <div class="box" data-id="1">
        <button class="btn">button2</button>
      </div>
      <div class="box" data-id="2">
        <button class="btn">button3</button>
      </div>
      <div class="box" data-id="3">
        <button class="btn">button4</button>
      </div>
      <div class="box" data-id="4">
        <button class="btn">button5</button>
      </div>
    </div>
    <div class="more-info">
      <div class="more-info_box" data-id="0">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore sint molestias, facilis molestiae reiciendis nam, laborum consequuntur, recusandae quod voluptatem perspiciatis! Suscipit enim neque non iste corrupti possimus a.
      </div>
      <div class="more-info_box" data-id="1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore sint molestias, facilis molestiae reiciendis nam, laborum consequuntur, recusandae quod voluptatem perspiciatis! Suscipit enim neque non iste corrupti possimus a.
      </div>
      <div class="more-info_box" data-id="2>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore sint molestias, facilis molestiae reiciendis nam, laborum consequuntur, recusandae quod voluptatem perspiciatis! Suscipit enim neque non iste corrupti possimus a.         
      </div>
      <div class="more-info_box" data-id="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore sint molestias, facilis molestiae reiciendis nam, laborum consequuntur, recusandae quod voluptatem perspiciatis! Suscipit enim neque non iste corrupti possimus a.
             
      </div>
      <div class="more-info_box" data-id="4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore sint molestias, facilis molestiae reiciendis nam, laborum consequuntur, recusandae quod voluptatem perspiciatis! Suscipit enim neque non iste corrupti possimus a.
      </div>
    </div>
</div>

@Mikola-BLR · 08.09.2017, 14:34

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $('.box').click(function () {
        var id = $(this).data('id');
 
        $('.more-info_box').hide();
        $('.more-info_box[data-id="' + id + '"]').slideToggle(400);
    });
});

@rav41k · 08.09.2017, 15:11 **[ТС]**

Большое спасибо

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@rav41k 0 / 0 / 0 Регистрация: 11.01.2016 Сообщений: 39
	08.09.2017, 15:11 [ТС]
	Большое спасибо 0

Hide-show с data атрибутами

Решение