Как сверстать такой элемент?

Question

[Saberwalker]

Обязателен ли js?

Comments

[Иван]

и тут приходит на помощь jquery

Answer 1

[sergey]

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

Comments

[Saberwalker]

Спасибо, то что надо.

Answer 2

[Андрей Б.]

Обязателен. Как минимум, чтобы обрабатывать клики на + - и показывать/скрывать блок

Comments

[Saberwalker]

Есть ссылка на что-то похожее?

[Exploding]

Ну показывать/скрывать блоки в 2017 году используя js, а не css - мне кажется бездумное транжирство памяти

[Александр Шаповал]

Exploding: все равно придется использовать что бы счетчик клацать, а если использовать все равно использовать, то почему бы и другое не сделать на js

[Ростислав Сергеевич]

Александр Шаповал: по-вашему, если использовать JavaScript, то количество памяти, занимаемое исполняемым кодом будет в любом случае, независимо от количества кода, одинаковое?

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

[Exploding]

Александр Шаповал: Да, счетчик он такой)) Но!!)))
Если таких блоков на странице много - быстрее и ресурсоёмче будет css?
Для показа/скрытия js все равно использует инлайновые css стили, а это уже мне напоминает частую ситуацию в маршрутках (за что я их и ненавижу)))) когда заходит например тётка лет ~45-50 в задние двери, в салоне все сидят, и она садится на самое заднее сиденье и начинает хлопать своей руко-лопатой впереди сидящего по плечу мол на - передай "пжлст" за проезд водиле, тот хлопает сидящего впереди него, и так вся маршрутка начинает напрягаться, чтобы передать бабло это ленивой коровы аж к водиле!!! Вместо того чтобы подняться и сделать 5 шагов!
Я в таких случаях если меня хлопают по плечу - беру бабло, чтобы не напрягать других пассажиров и еще ради фана - встаю, делаю эти мега 3-4 шага до водилы и возвращаюсь назад.
Сами понимаете эмоции этих "хлопунов" после этого и мозговой коллапс когда их надежная отлаженная система дала сбой невиданных масштабов))

Ээээ, так это я к чему... Не в обиду никому конечно, а только как аналогия в моей голове и только: то что пассажиры салона это CSS, а тётка это JS :)) Если рассматривать пример с открытием/закрытием блоков

[Александр Шаповал]

Ростислав Сергеевич: скрыть/показать блок наверное столько кода занимает что мало какому устройству под силу такое проделать, вы правы, бред написал.

[Александр Шаповал]

Exploding: согласен)) я сейчас на стадии потного изучения js, потому пихаю его везде где могу пихнуть что бы набить руку) потому имею оплошность советовать нерациональные действия, виноват)
p.s я бы еще класс написал на js что бы скрыть/показать блок

[Ростислав Сергеевич]

Александр Шаповал: раз пару строк добавить, два пару строк добавить... В крупных проектах за такое наказывают. И да, у вас очень тонкий сарказмический юмор. Ценю.

[sergey]

Saberwalker: погуглите в нете достаточно примеров реализации, найду свой покажу

[Андрей Б.]

Раздули из мухи слона...

Exploding CSS можно, только зачем писать лишний код с фокусами и инпутами когда можно просто вешать класс?

[Exploding]

Андрей Б.: Ну немного и слона, но это же тематическое обсуждение и обмен опытом и знаниями.
Не совсем понял, какой код с фокусами и инпутами? И какой класс класс куда вешать...

[Shemil]

Exploding: Простите, а как вы собираетесь скрыть и показывать блок с помощью css? Не проще ли с помощью классов реализовать, например:
elem.classList.toggle('show')

[Андрей Б.]

Shemil как минимум на hover или подобным извратом https://jsfiddle.net/1qrkgy3m/

[Exploding]

Shemil: уффф....
По вашему класс это что-то абстрактно-неопределенное, но никак не css?
Вы про маршрутку внимательно прочитали мой пост?)

[Exploding]

Shemil: Вот первое что попалось для примера вам:
Табы
Слайдер

[Exploding]

Андрей Б.: чтобы извратом не казалось есть -webkit-appearance