Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/8: Рейтинг темы: голосов - 8, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 21.01.2018
Сообщений: 9
1

Как сделать чтобы при открытии одного элемента Collapsible закрывался другой?

18.01.2021, 10:30. Просмотров 1510. Ответов 3

HTML5
1
2
3
4
5
6
7
8
<div class="category-first">
    <span class="computer-category collapsible">Computer</span>
    <ul class="computer-elements">
        <li class="list-element"><a href="#">Software</a></li>
        <li class="list-element"><a href="#">Networking</a></li>
        <li class="list-element"><a href="#">Operating Systems</a></li>
    </ul>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var coll = document.getElementsByClassName("collapsible");
var i;
            
for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
             content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        } 
     });
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.01.2021, 10:30
Ответы с готовыми решениями:

Написал аккордеон, как сделать так, чтобы при клике на другой пункт, закрывался предыдущий?
Здравствуйте, Написал аккордеон на js, но не могу придумать как сделать так, что бы при клике на...

Как сделать чтобы при одинарном клике открывался/закрывался Popap?
Здравствуйте! &lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;ru-RU&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

Как сделать так, чтобы при закрытии клиента закрывался и сервер?
Допустим есть две программы... Одна из них сервер вторая клиент... Первая программа(сервер)...

Как сделать чтобы при открытии формы scroll элемента panel выставлялся в нужное положение?
Как сделать чтобы при открытии WinFoRm scroll элемента panel выставлялся в нужное положение?

3
555 / 414 / 151
Регистрация: 26.05.2016
Сообщений: 2,341
18.01.2021, 11:54 2
Лучший ответ Сообщение было отмечено Gigioshkin как решение

Решение

Gigioshkin, так?
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <span class="computer-category collapsible">First</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">first</a></li>
            <li class="list-element"><a href="#">first</a></li>
            <li class="list-element"><a href="#">first</a></li>
        </ul>
        <span class="computer-category collapsible">Second</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">second</a></li>
            <li class="list-element"><a href="#">second</a></li>
            <li class="list-element"><a href="#">second</a></li>
        </ul>
        <span class="computer-category collapsible">Third</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">third</a></li>
            <li class="list-element"><a href="#">third</a></li>
            <li class="list-element"><a href="#">third</a></li>
        </ul>
    </body>
</html>
<script src = "299.js"></script>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener("DOMContentLoaded", getReady);
function getReady()
{
    document.querySelectorAll('[class="computer-category collapsible"]').forEach((elem)=>
    {
        elem.addEventListener('click', click_span);
    });
}
function click_span()
{
    document.querySelectorAll('.computer-elements').forEach((elem)=>
    {
        elem.style.display = 'none';
    });
    this.nextElementSibling.style.display = 'block';
}
1
0 / 0 / 0
Регистрация: 21.01.2018
Сообщений: 9
18.01.2021, 17:30  [ТС] 3
atanov, Спасибо огромное! А можно еще при нажатии на открытый элемент он закрывался?
0
555 / 414 / 151
Регистрация: 26.05.2016
Сообщений: 2,341
19.01.2021, 08:12 4
Gigioshkin, добавьте логику проверки:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.addEventListener("DOMContentLoaded", getReady);
function getReady()
{
    document.querySelectorAll('[class="computer-category collapsible"]').forEach((elem)=>
    {
        elem.addEventListener('click', click_span);
    });
}
function click_span()
{
    if(this.nextElementSibling.style.display == 'block')
    {
        this.nextElementSibling.style.display = 'none';
        return;
    }
    document.querySelectorAll('.computer-elements').forEach((elem)=>
    {
        elem.style.display = 'none';
    });
    this.nextElementSibling.style.display = 'block';
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.01.2021, 08:12

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать так, чтобы при открытии одной папки появлялось окно с запросом логина и пароля, а другой — нет?
Добрый день ! У меня такая проблема: есть КД Windows Server 2012 R2 Essential и расшаренная...

Как сделать так чтобы страничка при увеличения разрешения не двигалась в разные стороны, и как сделать чтобы при открытии в опере и в других браузерах
все обьекты на странице не двигались в разные стороны???

Как сделать так чтобы страничка при увеличения разрешения не двигалась в разные стороны, и как сделать чтобы при открытии в опере и в других браузерах
все обьекты на странице не двигались в разные стороны???

Как сделать, чтобы при компиляции в ехе после конца операции не закрывался ехешник
Всех приветствую! У меня небольшая проблема. У меня есть код по вычислению степеня из любого числа...

как сделать так,чтобы все линии идеально совпадали при наложении одного объекта на другой?!
как сделать так,чтобы все линии идеально совпадали при наложении одного объекта на другой?! всегда...

Как сделать чтобы при открытии файла в VS, скролл элемента "panel" находился в определённом положении?
Как сделать чтобы при открытии файла в Visual Studio для работы с кодом и &quot;Windows Forms&quot; скрол...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.