Question

Using Bootstrap modal that contains tabs. The modal is called from a php generated table of gallery names.

Table Data

<td>
<a href="#" class="galName" data-target="#myModal" data-toggle="modal" id="update_<?php echo $gal['id']; ?>" >
<?php echo $gal['name']; ?>
</a>
</td>

The modal opens and the first tab is selected on initial fire. If I navigate to another tab close the modal and select a different gallery the modal opens to the last tab that was open.

How do I make sure that when the modal is opened, it always opens to the first tab?

Modal Tabs

<ul id="myTab" class="nav nav-tabs">
  <li class="active">
       <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="">
       <a id="uploadRevision" href="#upload" data-toggle="tab">Upload Revision</a>
  </li>
  <li class="">
       <a href="#editRev" data-toggle="tab">Edit Revision</a>
   </li>
 </ul>

.galName fires an initUpdate function in effort to set first tab as default. It sets the tab but tab content is not show.

function initUpdate()
{ 
  $('#myModal a:first').tab('show');
}

Thanks for the help.

Answer 1

Found the solution. Must remove the class=”active” from both tab and tabContent. Thanks to @merv – https://stackoverflow.com/a/11762931/1214858