Button toggle div

I’m looking for my button element in one row to toggle the display block / none toggle of a div in the following row. Is there a cornerstone native way of doing so rather than something like this:

Button ID: compare-trigger
Div ID: cupro-services-compare
Div class: toggle-content-hidden

Css:
/* Hide the div by default /
.toggle-content-hidden {
display: none !important;
}
/
Show the div when the “is-open” class is added via JS */
.toggle-content-hidden.is-open {
display: block !important;
}

JS:
jQuery(document).ready(function($) {
$(‘body’).on(‘click’, ‘#compare-trigger’, function(e) {
$(’#cupro-services-compare’).toggleClass(‘is-open’);
console.log(‘Toggle triggered for: cupro-services-compare’);
});
});

Thanks.