How to show a bootstrap collapse div on button click?

Question

I have the following div and want to show this on button click.

I am using this jquery code on button click event.

$('.container collapse').removeClass('.container collapse').addClass('container');

Why its not now showing the div as I have changed the class?

<div class="container collapse">
    <div class="row form-group">


        <div class="col-md-6">
            <div class="col-md-12" style="height:300px;">
                <canvas id="graph1"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="col-md-12" style="height:300px;">
                <canvas id="graph2"></canvas>
            </div>
        </div>

    </div>

    <div class="row form-group">


        <div class="col-md-6">
            <div class="col-md-12" style="height:300px;">
                <canvas id="graph3"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="col-md-12" style="height:300px;">
                <canvas id="graph4"></canvas>
            </div>
        </div>

    </div>
</div>

Its throwing an error 'Uncaught TypeError: $(...).removeClass is not a function'.

Answer 1

You have to concatenate the tags with dots if they are style-classes on the same element.

$('.container.collapse').removeClass('collapse');

Otherwise if you use $('.container collapse') jquery will try to find an child-element inside .container of the type collapse .

You also don't have to put the dots inside the removeClass and addClass calls. Since you remove and re-assigning the container-class, you can just leave it there and only remove the collapse-class.