Nie wiem czy do końca zrozumiałem Twoje pytanie, ale poniżej jest Moja propozycja. 
. Oczywiście "ostylowanie" elementów html jest tylko na potrzeby przykładu, możesz je zmienić. Codepen
<div class="container">
<section>
<button class="main unchecked">Grupa 1</button>
<button class="submain hidden" value="1-1">pozycja 1-1</button>
<button class="submain hidden" value="1-2">pozycja 1-2</button>
<button class="submain hidden" value="1-3">pozycja 1-3</button>
</section>
</div>
<div class="container">
<section>
<button class="main unchecked">Grupa 2</button>
<button class="submain hidden" value="2-1">pozycja 2-1</button>
<button class="submain hidden" value="2-2">pozycja 2-2</button>
</section>
</div>
<div class="container">
<section>
<button class="main unchecked">Grupa 3</button>
<button class="submain hidden" value="3-1">pozycja 3-1</button>
<button class="submain hidden" value="3-2">pozycja 3-2</button>
<button class="submain hidden" value="3-3">pozycja 3-3</button>
<button class="submain hidden" value="3-4">pozycja 3-4</button>
</section>
</div>
<div class="message-box hidden" data-action="">
<span class="message"></span>
<button value="ok">Ok</button>
<button value="cancel">Cancel</button>
</div>
.container {
margin: 1em;
}
section {
display: inline;
}
section button {
font: 0.9em monospace;
cursor: pointer;
color: black;
height: 2em;
outline: none;
border-radius: 0.5em;
border: 1px solid gray;
transition: all 0.1s;
}
section button.main {
width: 6em;
margin-right: 2em;
}
section button.submain {
width: 8em;
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
section button.submain:active {
box-shadow: none;
}
.checked {
box-shadow: none;
color: lawngreen;
background-color: seagreen;
border-color: lawngreen;
}
.unchecked {
box-shadow: 2px 2px 1px rgba(0,0,0,0.4);
}
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
.message-box {
font: 1em monospace;
margin: 1em;
height: 1.4em;
}
.message-box button {
font: 1em monospace;
font-variant: small-caps;
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
margin: 0 0.2em;
width: 4em;
height: 1.5em;
text-align: center;
outline: none;
border-radius: 0.5em;
cursor: pointer;
}
.message-box button:hover {
color: seagreen;
}
.message-box button:active {
box-shadow: none;
}
const main_buttons = document.querySelectorAll('.main');
main_buttons.forEach((button) => {
button.addEventListener('click', ( {target} ) => {
if (target.classList.contains('checked')) {
target.classList.remove('checked');
target.classList.add('unchecked');
subButtons('hidden', target);
} else {
target.classList.remove('unchecked');
target.classList.add('checked');
subButtons('visible', target);
}
});
});
const section_buttons = document.querySelectorAll('.submain');
section_buttons.forEach((button) => {
button.addEventListener('click', ( {target} ) => {
let text = 'Czy jesteś pewny że chcesz wybrać przycisk:';
text = `${text} <b>${target.value}</b> ?`
messageBox('show', text, target.value);
});
});
const message_box = document.querySelector('.message-box');
const message = document.querySelector('.message-box .message');
const message_box_buttons = document.querySelectorAll('.message-box button');
message_box_buttons.forEach((button) => {
button.addEventListener('click', ( {target} ) => {
switch(target.value) {
case 'cancel':
messageBox('hide');
break;
case 'ok':
const action = message_box.getAttribute('data-action');
// tu akcja
alert('Akcja dla: ' + action);
/* swich(action) {
case '1-1':
dla przycisku <button value="1-1">
break;
. . .
case '3-2':
dla przycisku <button value="3-2">
break;
itp.
}
*/
break;
}
});
});
function messageBox(cmd, msg='', action='') {
let class_remove = '';
let class_add = '';
switch(cmd) {
case 'show':
class_remove = 'hidden';
class_add = 'visible';
break;
case 'hide':
class_remove = 'visible';
class_add = 'hidden';
break;
}
message_box.setAttribute('data-action', action);
message.innerHTML = msg;
message_box.classList.remove(class_remove);
message_box.classList.add(class_add);
}
function subButtons(cmd, target) {
const section_buttons = target.closest('section');
if(!! section_buttons) {
const sub_buttons = section_buttons.querySelectorAll('.submain');
if(!! sub_buttons) {
sub_buttons.forEach((sub_button) => {
if(cmd == 'visible') {
sub_button.classList.remove('hidden');
sub_button.classList.add('visible');
} else {
sub_button.classList.remove('visible');
sub_button.classList.add('hidden');
}
});
}
}
}
