How to add collapse property in panel and close the panel using bootstrap

In below code we have div section with class value as col-xs-3 and we have class value as panel default, in that we have created panel heading and defined the panel heading with anchor tag with class value data-toggle as collapse with value as DotNetFunda, after that we have created button to close the panel using class value as close and data-dismiss as alert with href as #tec , we have declared id in the panel default as tec which triggers the panel to close by clicking button and after we have another div section with id as dnf with class value panel body with active state with value as Best Online Tutorials

<h3>Panel with collapse and data-dismiss property</h3>
    <div class="col-xs-3">
        <div class="panel panel-default" id="tec">
            <div class="panel-heading" style="background-color:green;">
                <a href="#dnf" data-toggle="collapse" style="color:white;">DotNetFunda</a>
                <button type="button" href="#tec" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="dnf" class="panel-body collapse active in">Best Online Tutorials</div>
        </div>
    </div>