Как сделать так, чтобы при нажатие на кнопку отображалось только то меню, к которому оно относится?

Question

[Ffinnis]

Мне нужно добиться того, чтобы при нажатии на кнопку ul принимала display: flex. Я это осуществил, но криво, и теперь открываются все ul становятся flex, вместо одной. Я искал информацию и понял, что, скорее всего, надо использовать target и addEventListener, но испробовав довольно много гайдов у меня ничего не получилось, в связи с чем, я прошу о помощи!

Мой код:

<ul class="programm__list-item__sublist">
						<li class="programm__list-item__sublist-item">
							Урок №1. Исследование рынка
						</li>
						<li class="programm__list-item__sublist-item">
							Урок №2. Product маркетинг FIT
						</li>
						<li class="programm__list-item__sublist-item">
							Урок №3. Инструкция по работе с подрядчиками
						</li>
</ul>

function clickBtn(){
    $('.programm__list-item__btn').click(function(event){
        $('.programm__list-item__btn,.programm__list-item__sublist').toggleClass('active');
    });
};

$(clickBtn);

Надеюсь, что кто-нибудь мне поможет, я буду безмерно благодарен за любую попытку помочь

Comments

[Антон Литвиненко]

нужна более подробная разметка с кнопками, чтобы поправить ваш код.
код работает как нужно, открывает все сублисты. addEventListener это всего лишь нативный метод повесить обработчик, он вам ничем не поможет.

[Максим Иванов]

А css код?

[Ffinnis]

Максим Иванов, сейчас отправлю

[Ffinnis]

Антон Литвиненко, сейчас отправлю с css и шаблон, чтобы было понятнее, за код не ругайте, я только первый месяц верстаю

[Ffinnis]

Максим Иванов, Антон Литвиненко,
HTML:

<li class="programm__list-item">
					<h3 class="programm__list-item__title">
						Продуктовая аналитика
					</h3>
					<button class="programm__list-item__btn">
					</button>
					<ul class="programm__list-item__sublist">
						<li class="programm__list-item__sublist-item">
							Урок №1. Исследование рынка
						</li>
						<li class="programm__list-item__sublist-item">
							Урок №2. Product маркетинг FIT
						</li>
						<li class="programm__list-item__sublist-item">
							Урок №3. Инструкция по работе с подрядчиками
						</li>
						<ul class="programm__list-item__sublist-item__learn">
							<li class="programm__list-item__sublist-item__learn-item">
								Вы научитесь
							</li>
							<li class="programm__list-item__sublist-item__learn-item">
								Первый тезис
							</li>
							<li class="programm__list-item__sublist-item__learn-item">
								Второй тезис
							</li>
							<li class="programm__list-item__sublist-item__learn-item">
								Третий тезис
							</li>
						</ul>
					</ul>
				</li>

CSS:

.programm__list-item{
	list-style-type: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	background-color: #F5F7FF;
	border-radius: 24px;
	border: 0;
	flex-wrap: wrap;
	padding: 18px 0 0 0;
	margin-bottom: 10px;
}

.programm__list-item__title{
	font-weight: 700;
	font-size: 20px;
	line-height: 36px;
	color: #1E376A;
	margin-left: 102px;
}

.programm__list-item__btn{
	border: 0;
	background: linear-gradient(173.48deg, #2BE9A3 7.91%, #07CDBF 56.39%, #00C7C5 66.53%, #09C7CA 74.43%, #21C9D8 89.08%, #48CBEE 107.12%, #66CCFF 119.52%);
	box-shadow: 0px 22px 36px rgba(1, 200, 197, 0.3);
	border-radius: 20px;
	transform: rotate(-90deg);
	width: 40px;
	height: 40px;
	transition: all 0.4s ease 0s;
	margin-right: 30px;
	margin-bottom: 16px;
}

.programm__list-item__btn::before{
	content: "";
	width: 100%;
	height: 100%;
	position: relative;
	transition: all 0.4s ease 0s;
}

.programm__list-item__btn::after{
	position: relative;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid #FFF;
    border-top: 1.5px solid #FFF;
	transform: rotate(225deg);
	top: 0.5px;
	left: 0.5px;
	transition: all 0.4s ease 0s;
}

.programm__list-item__sublist{
	display: none;
	position: relative;
	flex-direction: column;
	background: #FFFFFF;
	box-shadow: 0px 14px 50px rgba(132, 154, 182, 0.12);
	margin-top: 18px;
	padding: 50px 803px 49px 102px;
}

.programm__list-item__btn.active::after{
	position: relative;
	transform: rotate(135deg);
	bottom: 5px;
	left: 0px;
}

.programm__list-item__sublist.active{
	display: flex;
}

.programm__list-item__sublist-item{
	font-weight: 600;
	font-size: 16px;
	line-height: 28px;
	color: #1E376A;
	margin-bottom: 16px;
}

.programm__list-item__sublist-item:nth-child(3){
	margin-bottom: 39px;
}

.programm__list-item__sublist-item__learn-item:nth-child(1){
	font-weight: 700;
	font-size: 16px;
	line-height: 28px;
	color: #4C68EF;
}

.programm__list-item__sublist-item__learn-item{
	font-size: 16px;
	line-height: 28px;
	color: #1E376A;
}

И шаблон

Answer 1

[syntaxorange]

function clickBtn() {
    var $btn = $('.programm__list-item__btn');
    var $sublist = $('.programm__list-item__sublist');

    $btn.click(function(event) {
        var $target = $(event.currentTarget);
        var $dropdown = $target.next();

        $btn.not($target).toggleClass('active', false);
        $sublist.not($dropdown).toggleClass('active', false);
        $target.toggleClass('active', true);
        $dropdown.toggleClass('active', true);
    });
};

clickBtn();

Comments

[Ffinnis]

Огромное спасибо, удачи вам