<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>the video section should show youtube which there on html but not on the page.
i checked whether jquery is loaded ahead of bootstrap.js.. But still it is not working. Turns out the tab button is not working like it should. although when u click on image button image section will be shown. Is it the problem only with input tag?