Creating Tabs in AngularJs

Question

I am trying to create simple tabs using only divs with ng-show and ng-hide. I do not want to use jQuery or BootStrap. I created tabs, but I cannot handle divs correctly.

Js fiddle

<div ng-app ng-controller="sample"> <div class="cb" ng-click="showDetails = ! showDetails">tab 1</div> <div class="cb" ng-click="showDetails = ! showDetails">tab 2</div> <div ng-hide="showDetails"> <p>first</p> </div> <div ng-show="showDetails"> <p>second</p> </div> 

Even if I click on the first tab, the contents of the second tab will be displayed. How can I only display the first content when I click the first tab and the second content when I click the second?

Thanks in advance.

Answer 1

http://jsfiddle.net/x8xfM/2/

 <div ng-app ng-controller="sample" ng-init="tab=1"> <div class="cb" ng-click="tab = 1">tab 1</div> <div class="cb" ng-click="tab = 2">tab 2</div> <div ng-show="tab == 1"> <p>first</p> </div> <div ng-show="tab == 2"> <p>second</p> </div> </div> 

In your case, showDetails = !showDetails will switch to the active tab every time you click on ANY tab.