I was wondering how I could arrange these better? Currently I have sections 1-3 and when you select one or multiple it give you new row of check boxes. I think this is quick way to solve problem but exhausting on UI.

enter image description here


If the number of top-level sections is three, or at least reasonably small, you can use a different layout:

Sections reworked

The subsections will be rendered under the corresponding top-level section, so it expresses the hierarchy clearer.


Use the Section 1, Section 2 & Section 3 as in the side sticky bar, and further check boxes can be viewed like tags format based on which the content can be filter or displayed. Please check the attachment for reference. - > https://i.stack.imgur.com/ChSXu.png


If I understand your problem correctly, you have a couple of items in the highest order and each of them has some subitems. And you need to make it visually unambiguous which item of the highest order is "opened".
What about some background colour hinting, like this?


download bmml source – Wireframes created with Balsamiq Mockups

Not the answer you're looking for? Browse other questions tagged or ask your own question.