I'm not sure how to best word the title for this question (apologies).
I have a scenario where on default, my screen will show all data for a data comparison. The user can then apply filters to hone in on specific facets of the data being compared.
So, here's what I want to happen:
[_] Apply a filter to delimit age ranges being displayed.
If the user selects this, the following should display:
[X] Apply a filter to delimit age ranges being displayed [_] 18-25 [_] 26-36 [_] 37+
The issue here is that i have several types of filters that a user can apply. I don't want to put all of the checkboxes on the filter screen explicitly because I have very limited real estate and only want to show checkbox options the user can select only if it's needed.
I only want the checkboxes to display only if the initial condition is met (in this case, the checkbox initially asking a user if they want to apply age range delimiters). I'm just not sure it's the most elegant solution. Does anybody have any ideas on how to better accomplish this?
Additionally, if this is the best way to do this, does anybody know of a good jquery or animation where the area around this checkbox expands to make room for the additional checkboxes?