Designing button related functionality

I am planning to have a button and then display three more buttons when someone clicks on it. Not sure if this is the correct design for my scenario described below.

Main button will say Show Retired Things. When user clicks on it, I want to show three more buttons. First button will say Show Tier-I Retired things, second button will say Show Tier-II Retired things and Third. button will say Show Tier-III Retired things

Is there a better way to design this? When a user clicks on these three buttons, I am planning to show a jquery dialog with some tabular data in it. I’m plannng to use other libraries for displaying data .

It’s a design, sure.

What you’re basically describing is an accordion.


I suggest you do not have a “main button”, just display something roughly like this:



Thanks. I have one more thing to display (probably next to the above one), which is gonna be Show Full Boxes and then Tier-I Boxes, Tier-II Boxes and Tier-III Boxes so with this approach, I am thinking if it’s going to be a more clean approach.

Is there something like having a main button and then that expands to three buttons in accordion?

You can use details and summary elements to show and hide things without js.

Here’s the basic example wirth 3 buttons.

This advanced example below is probably not accessible but you can actually use nested details elements to disclose more stuff.

However I would be inclined to have just the single details element and then open the modals with JS. Whatever method you use you will need to work in keyboard and accessibility access etc.


Have you considered doing it in a menu, sub-menu style?

Then only ‘click’ event listeners at the leaf nodes would be needed.

Thanks for your examples.

Could you elaborate on what do you mean when you sau “probably not accessible”?

Are you referring to the advanced example(second one) you showed above?

Could you elaborate on keyboard an accessibility access etc here?

The details element has always had problem with screen readers although I believe things are a little better than they were. You can read about the problems in this article and also from the links at the bottom of the article.

It’s a choice you have to make for yourself once you understand the problems. Not everything is 100% accessible so there is always a trade off between what you can do and can’t do.

The first example is the basic version as it doesn’t cater for the modal but just shows the three buttons. You would then need to use JS to create your modal and with that in mind you can build in keyboard and accessibility features for opening and closing etc.

The details and summary are keyboard accessible and you can tab to them and press enter to open and close them so are usable without a mouse. However the advanced example I gave creates a modal from the nested details element and modals should really have a defined set of interactions for the keyboard as mentioned in the link I already gave above..

Note that even if you use a fully JS operated button toggle and modal effects you would still need to build in the keyboard access and aria roles for hidden content etc. It all depends on how important the function is to the working of the site and how far you want to go to aid accessibility. :slight_smile: