Как сделать такую кнопку?

Question

[Владимир]

Подскажите пожалуйста как сделать такой блок. При нажатии на кнопку с плюсиком появляется блок с текстов. При нажатии кнопка меняет цвет на зеленый. По умолчанию она черная и блок с текстом скрыт

Comments

[Владимир Проскурин]

Подумайте сами. Что вам для этого нужно?
1) Сверстайте как есть.
2) Спрячьте блок с текстом.
3) Подумайте, как вам показывать блок с текстом. Для этого есть как минимум 2 варианта:
3.1) Добавить через JS при клике на блок класс, и удалить при повторном клике. На этот класс опишите стили, которые покажут блок.
3.2) Воспользуйтесь label + checkbox, у активного чекбокса есть псевдокласс .checkbox:checked, и вы можете назначать соседние стили через ~ или +, таким образом, вот вам и переключатель.

Answer 1

[2cha.headz]

т.к. здесь не фриланс опишу возможный вариант, который вы должны реализовать сами:

у вас есть блок родитель, внутри которого кнопка, заголовок и текст (скрытый изначально с display: none)
вешаете js обработчик на кнопку, который при клике добавляет/удаляет класс (например .active) родителю,
и добавляете доп стили через этот класс, т.е. если есть .active у родителя, то кнопка зеленая и текст display: block;

Comments

[Владимир]

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

var button = document.querySelector('.button');
var buttonContent = document.querySelector('.button-content');
var description = document.querySelector('.description');

button.addEventListener('click', function () {
    button.classList.add('active1');
    description.classList.add('description1')
});
buttonContent.addEventListener('click', function () {
    button.classList.add('active1');
    description.classList.add('description1')
});

[2cha.headz]

Владимир,

//.plus - кнопка (поменять на свой)
//.parent - родитель (поменять на свой)
$('.plus').click(function(e){
    e.preventDefault();
    $(this).closest('.parent').toggleClass('active');
})

.description {display: none}
.plus {color: black}
.active .description {display: block}
.active .plus {color: green}

[Владимир]

2cha, Что то у меня не получается по вашему примеру я не силен в JS. вот скинул код и почему то клик работает только на первом блоке а не на всех а класс у всех одинаковый
https://codepen.io/anon/pen/pBjwdZ

[2cha.headz]

Владимир, https://jsfiddle.net/wnpumLrf/

[Владимир]

2cha, Огромное вам спасибо и всего пару строк кода))

Answer 2

[Denis Melnikov]

Я конечно не мастер верстки.

Но думается алгоритм такой
Вешаем ивент OnClick На кнопку, далее делаем ToggleClass -> active кнопке и блоку.

Answer 3

[Андрей]

при клике всему блоку даешь класс active например

.description {display: none}
.plus {color: black}
.active .description {display: block}
.active .plus {color: green}