Как подвязать событие клика на вложенный html елемент

@Dimas_95 · Регистрация: 14.01.2017

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

Нужно чтобы при клике по <div class="progress"> открывался либо схлопывался <div class="progress-acordions"> под ним. Подскажите как это сделать.
У меня получилось провернуть подобное когда подвесил событие клика на <div class="progress-wrapper">.

Javascript

1
2
3

     $('.progress-wrapper').on('click', function () {
       $(this).find(".progress-acordions").slideToggle("slow");
     });

Работает коректно но это не совсем то что мне нужно, так как в <div class="progress-acordions"> в дальнейшем будут кнопки и поля для ввода, и при попытке ввести что-то этот div схлопнется. Нужно чтобы он сворачивался и разворачивался при клике на <div class="progress">.
Вот верстка

HTML5

                <div class="progress-wrapper">
                    <div class="progress">
                            <span>Нория</span>
                            <progress max="100" value="50"></progress>
                            <div class="progress-value"></div>
                            <div class="progress-bg"><div class="progress-bar"></div></div>
                    </div>
                    <div class="progress-acordions">
                        <p>ТО:</p>
                        <p>Регламентные работы:</p>
                        <p>Исполнитель:</p>
                    </div>
                </div>
 
                <div class="progress-wrapper">
                    <div class="progress">
                            <span>Транспортер</span>
                            <progress max="100" value="30"></progress>
                            <div class="progress-value"></div>
                            <div class="progress-bg"><div class="progress-bar"></div></div>
                    </div>
                    <div class="progress-acordions">
                        <p>ТО:</p>
                        <p>Регламентные работы:</p>
                        <p>Исполнитель: <input type="text"></p>
                    </div>
                </div>
 
                <div class="progress-wrapper">
                    <div class="progress">
                            <span>Шибер</span>
                            <progress max="100" value="71"></progress>
                            <div class="progress-value"></div>
                            <div class="progress-bg"><div class="progress-bar"></div></div>
                    </div>
                    <div class="progress-acordions">
                        <p>ТО:</p>
                        <p>Регламентные работы:</p>
                        <p>Исполнитель:</p>
                    </div>
                </div>

@Iverycool · 22.10.2020, 10:52

Dimas_95,

Javascript

1
2
3

$('.progress').on('click', function () {
  $(this).parent().find(".progress-acordions").slideToggle("slow");
});

@Dimas_95 · 22.10.2020, 11:04 **[ТС]**

Я нашел еще один вариант решения пока ждал ответа ))

Javascript

1
2
3

      $('.progress').click(function() {
        $(this).next(".progress-acordions").slideToggle("slow");
      });

	22.10.2020, 11:04

Как подвязать событие клика на вложенный html елемент

Решение