Как показать\скрыть блок по клику на внутренние элементы обертки?

Question

[It]

Есть список карточек с элементом View more, при клике на этот элемент карточке должен добавляться класс visible и внутри скрытый блок должен стать видимым, заполнив всю карточку. В этом видимом блоке есть элемент Close, который по клику на него или по клику за пределы карточки должен убирать класс visible с карточки, делая тем самым блок снова скрытым.
Как это правильно на чистом js реализовать?

Вот код - Codepen

Answer 1

[Икотий Айтишевич]

Поставить обработчик onclick="" внутрь тега или написать скрипт. И при нажатии задавать нужный класс, а при нажатии на Close его убирать.

elem.classList.add/remove("class") – добавить/удалить класс.

Направление такое:

$(document).ready(function (e) {
    $(".class").on('click', function(){
         elem.classList.add/remove("class")
     });
});

Comments

[It]

просто добавить\удалить класс понятно как,с этим нет проблем. Основная проблема в том, что класс добавляется не к элементу, по которому кликают, а к другому, и убирается тоже не с элемента, по которому кликают, а с другого. По ссылке есть пример.
И нужен чистый js, не jquery.

[Икотий Айтишевич]

It, У Вас даже нет никакого JS кода, попробуйте почитать и сделать. Если не получиться, то вернитесь с вопросом. Вот Вам в помощь: https://learn.javascript.ru/.
В ином случае – это не вопрос, а задание.

Answer 2

[It]

Всё решилось в разы банальнее чем сначала казалось. Все эти массивы с переборами абсолютно не нужны. Повесил на кнопки обработчики onclick="this.parentElement.classList.toggle('visible');" и всё. На закрытие такоё же только с parent.parent. Так что вопрос исчерпан.