Bootstrap3.3.2 tabs not working: when I click on them different tab information shows up

Question

i want to show the listdata in process tab and listdata1 in approved tab and listdata2 in dismissed tab but here it showing all the listdata in process tab

                    <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#create">Process</a></li>
                    <li><a data-toggle="tab" href="#display">Approved</a></li>
                    <li><a data-toggle="tab" href="#display1">Dismissed</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" id="create" class="tab-pane fade in active">
                        <div id="listData"  runat="server">
                        </div>
                    </div>
                    <div role="tabpanel" id="display" class="tab-pane fade">
                        <div id="listData1"  runat="server">
                        </div>
                    </div>
                    <div role="tabpanel" id="display1" class="tab-pane fade">
                        <div id="listData2"  runat="server">
                        </div>
                    </div>
                </div>