I went through a question on SO, and optimized the code according to OP's requirements. I would like a review if it is done properly or not.
Here is the code snippet, there are 2 level buttons, when clicked 1st level button, it toggles second level button group.
Second level button group toggles div, which contains checkbox. Any review and suggestions are appreciated.
$(document).ready(function() {
var groups = ['a', 'b', 'c']; // here
$.each(groups, function(k, id) {
$('#' + id).hide();
$('#' + id + 'l').hide();
});
$(".button").click(function() {
var button_id = $(this).data('id');
$('#' + button_id).toggle();
var hide = $.grep(groups, function(value) {
return value != button_id;
});
$.each(hide, function(k, id) {
$('#' + id).hide();
});
});
var selector = [];
$.each(groups, function(k) {
selector.push('.' + groups[k]);
});
selector = selector.join(',');
$(selector).click(function() {
var button_id = $(this).data('id');
var class_id = $(this).attr('class');
var flag = $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').is(':visible');
$.each(groups, function(k, id) {
$('#' + id + 'l').children().hide();
});
$.each(groups, function(k, id) {
$('#' + id + 'l').hide();
});
$('#' + class_id + 'l').show();
if (flag)
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').hide();
else
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-id="a">Toggle a</button>
<button class="button" data-id="b">Toggle b</button>
<button class="button" data-id="c">Toggle c</button>
<div id="a">
<div class="a" data-id="1"><button>Toggle a1</button></div>
<div class="a" data-id="2"><button>Toggle a2</button></div>
<div class="a" data-id="3"><button>Toggle a3</button></div>
</div>
<div id="b">
<div class="b" data-id="1"><button>Toggle b1</button></div>
<div class="b" data-id="2"><button>Toggle b2</button></div>
<div class="b" data-id="3"><button>Toggle b3</button></div>
</div>
<div id="c">
<div class="c" data-id="1"><button>Toggle c1</button></div>
<div class="c" data-id="2"><button>Toggle c2</button></div>
<div class="c" data-id="3"><button>Toggle c3</button></div>
</div>
<div id="al">
<div class="al" data-id="1">this is line a1</div>
<div class="al" data-id="2">this is line a2</div>
<div class="al" data-id="3">this is line a3</div>
</div>
<div id="bl">
<div class="bl" data-id="1">this is line b1</div>
<div class="bl" data-id="2">this is line b2</div>
<div class="bl" data-id="3">this is line b3</div>
</div>
<div id="cl">
<div class="cl" data-id="1">this is line c1</div>
<div class="cl" data-id="2">this is line c2</div>
<div class="cl" data-id="3">this is line c3</div>
</div>