как с помощью js убирать - добавлять css свойство элементу?

202

22 сентября 2018, 10:20

на странице существует элемент

var viewh2 = $(".block_peptides:last-child .block-item .title_view h2")

у него есть margin-bottom=10px

необходимо при клике открывать список и делать margin-bottom = 40px

при повторном клике - список закрывается и нужно чтобы margin-bottom обратно делался 10px

сначала я сделал так:

 `  $(".title_view h2").click(function() {
    $(this).toggleClass("on");
    $(this).parent().parent().find(".block_content").slideToggle(300);
    viewh2.css("margin-bottom", "40px");
    return false;
    });`

список открывается марджин = 40px Но закрывается и марджин остается 40px Хотел решить проблему вот так:

    if ($(".block_content").is(":hidden")){
    viewh2.css("margin-bottom", "10px");
}else if ($(".block_content").is(":visible")) {
    viewh2.css("margin-bottom", "40px");
}

не помогает... Подскажите как правильно надо делатть?

Answer 1

В css создать два класса:

.active {
    margin-bottom: 40px;
}
.hidden {
    margin-bottom: 10px;
}

В html присвоить класс hidden и в js переключать классы. Этот код надо вставить в onclick обработчик:

viewh2.toggleClass('active');
viewh2.toggleClass('hidden');

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

TelegramBot (javascript) не работает совместно с циклом

Начинаю немного осваивать javascript и, как очень "умный", начал с запила телеграм бота)

154

javascript

JS и _ в префиксе

Есть такой код:

158

javascript

js Диалог SaveAs

Направьте что почитать1) Нужно по нажатию на кнопочку открыть диалог для выбора места сохранения файла

168

javascript

Как убрать курсор выделения текста? Jquery

Как убрать курсор выделения текста? Проблема: при наведении на текст, который имеет свойство disableSelection курсор изменяется на вот такой (2 по счету)...

273