CODEWITHSUNDEEP
cssangularjs
jimakos17
jimakos17

Reputation: 935

Creating tabs in AngularJs

I'm trying to create simple tabs using only divs with ng-show and ng-hide. I don't want to use jQuery or BootStrap. I have created the tabs but I cannot handle the 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 the first tab displays the content of the second tab. How can I display only the first content when I click the first tab and the second content when I click the second one?

Thank you in advance.

Upvotes: 4

Views: 10848

Answers (1)

SET001
SET001

Reputation: 11718

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 active tab each time you click on ANY tab.

Upvotes: 19

Related Questions