Несовсем понятно о чем вопрос.
Если именно о количестве постов – можно ограничить блок, в котором они лежат по высоте и задать ему
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 с порядковым номером, полученным выше добавляем класс-модификатор
Еще немного поменял тэги, чтобы семантично)
Средний
