when i click tab A, A content show
when i click tab B, A content hide B content show
but the effect i want is when i click tab A, A content show, click A tab again content hide.
Any suggest will be help thanks
<ul class="row text-center">
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab==a}" ng-click="tab = a ">a <i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0); " ng-class="{selected: tab==b}" ng-click="tab = b ">b <i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab==c}" ng-click="tab = c ">c <i class="icon ion-arrow-down-b"></i></a>
</li>
</ul>
<div class="a" ng-show="tab == a">a</div>
<div class="b" ng-show="tab == b">b</div>
<div class="c" ng-show="tab == c">c</div>
I have Answered like this Implementing angularJs factory or service for bootstrap tabs
same as I ready the example here
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
</ul>
here a
is noting but NULL