Creating tabs in AngularJs

Question

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.

@F4r-20, are there any description about markdown like you used for JSFiddle? — SET001
– SET001, Commented Jun 24, 2013 at 12:41

SET001 · Accepted Answer · 2013-06-24 09:10:19Z

19

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.

edited Jun 24, 2013 at 9:10

answered Jun 24, 2013 at 9:05

SET001

11.8k8 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mo Beigi Over a year ago

Great answer! Works nicely.

Collectives™ on Stack Overflow

Creating tabs in AngularJs

`JS Fiddle`

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related