• Как сверстать sidebar c вложенными несколькими рубрикаим?

    @saintluka
    Несовсем понятно о чем вопрос.

    Если именно о количестве постов – можно ограничить блок, в котором они лежат по высоте и задать ему overflow-y: auto, чтобы появилась вертикальная прокрутка.

    Если вопрос о жаваскрипте, то вот мое решение https://jsfiddle.net/hd2jz365/28/

    В чем состоит основная идея – мы же знаем, что каждому заголовку будет соответствовать свой список постов, следовательно количество элементов sidebar-top__text будет равно кол-ву элементов sidebar-bottom.
    Далее, что sidebar-top__text, что sidebar-bottom будут иметь по два состояния: активный/неактивный.
    Активный sidebar-top__text будет выделен цветом, а активный sidebar-bottom будет просто отображен (по-умолчанию display: none).
    Так-как используем БЭМ, создаем соответствующие модификаторы.

    Всего этого достаточно, чтобы сократить и сделать код более универсальным:
    – избавляемся от классов popular, popular-sb, recent, recent-sb, comments и т. д.. Классы должны быть максимально абстрактны, не привязываться к контенту
    – вешаем обработчик клика на sidebar-top__text и далее следующий сценарий:
    • сохраняем ссылку на элемент, по которому кликнули
    • у элементов sidebar-top__text удаляем класс-модификатор
    • добавляем класс-модификатор на элемент, по которому кликнули
    • получаем порядковый номер (индекс) элемента, по которому кликнули
    • у элементов sidebar-bottom удаляем класс-модификатор
    • элементу sidebar-bottom с порядковым номером, полученным выше добавляем класс-модификатор

    Еще немного поменял тэги, чтобы семантично)
    Ответ написан
    Комментировать