How to mark up sidebar c nested several Rubicam?

Learn to write and so I stumbled on this sidebar
5b522a92bef5f835671199.png
I assumed that you can do something like this https://jsfiddle.net/ju5sxkq4/21/
but this is not rational, if suddenly it will not last 5 posts and 10 or 15, there will be a lot of code.
June 3rd 19 at 19:19
1 answer
June 3rd 19 at 19:21
Solution
Not quite clear about the question.

If it is about the number of posts – you can limit the block they are in height and ask him overflow-y: autoto display vertical scrolling.

If the question of JavaScript, here is my solution https://jsfiddle.net/hd2jz365/28/

What is the main idea – we know that every header will fit your list of posts, therefore the number of elements sidebar-top__text is equal to the count of elements sidebar-bottom.
Further, sidebar-top__text, sidebar-bottom, will have two States: active/inactive.
Active sidebar-top__text is highlighted, and the active sidebar-bottom is just displayed (the default display: none).
So how do we use BEM create appropriate modifiers.

This is enough to cut and make the code more generic:
– get rid of classes popular, popular-sb, recent, recent-sb, comments, etc. Classes should be as abstract, not attached to content
– hang the handler for clicking on sidebar-top__text and then the following scenario:
• save a reference to the element clicked
• the elements sidebar-top__text deleted-class-modifier
• add the class modifier to the element clicked
• get the ordinal number (index) of the item that was clicked
• the elements sidebar-bottom remove-class-modifier
• item sidebar-bottom with a sequence number obtained above, add the class modifier

Even slightly changed tags to semantico)

Find more questions by tags HTMLCSSjQuery