bootstrap data toggle tab is working only one tab but the other tab is not working - bootstrap-modal

Question

<div class="widget-header" style="margin-top: 5%;">
<ul class="nav nav-tabs">
<li class="<c:if test="${tab != 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab != 'LETTERS'}">active </c:if>header" href="action" data-toggle="tab"><Regulations</a>
</li>
<li class="<c:if test="${tab == 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab == 'LETTERS'}">>selected active </c:if>header" href="action" data-toggle="tab">Letters</a>
</li>
<c:choose>
<c:when test="${tab != 'LETTERS'}">
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="regulationDiv">Manage Regulations</a>
</c:when>
<c:otherwise>
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="letterDiv">Add Letter</a>
</c:otherwise>
</c:choose>
</ul>
</div>
<div style="overflow: auto; max-height:60vh;" class="tab-content">
<c:if test="${tab != 'LETTERS'}">
<div id="regulationDiv" data-url='action'>
<jsp:include page="regulations.jsp"/>
</div>
</c:if>
<c:if test="${tab == 'LETTERS'}">
<div id="letterDiv" data-url='action'>
<jsp:include page="letters.jsp"/>
</div>
</c:if>
</div>
First tab by default its working second tab there is no event or click, looks like disabled tab.Am I missing something to include in div elements, I tried many ways seems no solution yet to me.