I am trying to implement a collapse panel with a button and adjust the class of another panel so that it fits within the width of the page. Here is the code snippet I have been working on:
button
// first attempt
$('#signup').on('click', function() {
$('#table').removeClass('col-md-12').addClass('col-md-8');
});
// second attempt
$('#signup').on('click', function() {
$('#table').toggleClass('col-md-12 col-md-8');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success" data-toggle="collapse" data-target="#panel" id="signup">Signup</button>
<div class="form-row">
<!-- panel 1 -->
<div class="form-group col-md-4 collapse" id="panel">
// content goes here
</div>
<!-- panel 2 -->
<div class="form-group col-md-12 ml-auto" id="table">
// content goes here
</div>
</div>Upon clicking the button, the aim is to display panel 1 while simultaneously changing the class of panel 2 from 'col-md-12' to 'col-md-8' in order to align it correctly within the bootstrap grid system. However, my attempts using an onclick trigger have proven unsuccessful.