Bootstrap Expand / Collapse Bug Fix Needed

I am uploading an attachment of my GUI. When the user clicks the + icon, the content expands. When the user clicks the - icon, the content collapses. When the user clicks the icons really fast they get messed up. It is currently using the JS function below: function toggleTableSelection(index) { if ([login to view URL]('database_table_columns'+index+'plus').[login to view URL] == 'none') { [login to view URL]('database_table_columns'+index+'plus').[login to view URL] = 'block'; [login to view URL]('database_table_columns'+index+'minus').[login to view URL] = 'none'; } else { [login to view URL]('database_table_columns'+index+'plus').[login to view URL] = 'none'; [login to view URL]('database_table_columns'+index+'minus').[login to view URL] = 'block'; } } I'd like to have a jquery solution that possibly involves these: $(".collapse").on('[login to view URL]', function(){ alert('The collapsible content is now fully shown.'); }); $(".collapse").on('[login to view URL]', function(){ alert('The collapsible content is now hidden.'); }); My modal content is attached that contains the GUI design. You will not have access to my server for this - viewing only. I must be 100% satisfied with the solution before releasing payment.