Bootstrap and jquery resorces

by Aya Salama

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
    <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-lg" onclick="showTabOne()">Open Modal</button>
</div>

<div class="modal fade" id="myModal" role="dialog" style="display:none">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade in active">
                    <!-- tab 1 -->
                    tab 1 text
                    <button type="button" class="btn btn-default" data-toggle="tab" href="#tab2">tab2</button>
                </div>                                                                  
                <div id="tab2" class="tab-pane fade">
                    <!-- tab 2 -->
                    tab 2 text
                    <button type="button" class="btn btn-default" data-toggle="tab" href="#tab3">tab3</button>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <!-- tab 3 -->
                    tab 3 text
                    <button id="tab1-btn" type="button" class="btn btn-default" data-toggle="tab" href="#tab1">tab1</button>
                </div>
            </div>
        </div>
    </div>
 </div>

JavaScript

showTabOne = function(){
		$('button[href="#tab1"]').tab('show');
}
// another option is to trigger click on the button that open tab1
/*
showTabOne = function(){
		$('#tab1-btn').click();
}
*/