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: auto
to display vertical scrolling.
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
will have two States: active/inactive.
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
• add the class modifier to the element clicked
• get the ordinal number (index) of the item that was clicked
• the elements sidebar-bottom
• item sidebar-bottom
with a sequence number obtained above, add the class modifier
Even slightly changed tags to semantico)