CODEWITHSUNDEEP
angularjs
Krish
Krish

Reputation: 517

angularjs accordion by default needs to open

on click on "toggle" i want to toggle the div a) how to keep the div content by default open / show? b) onclick how to toggle the class to achieve icon change from down to up?

Please refer the below fiddle: http://jsfiddle.net/EhTZW/572/

HTML:

<h3>Toggle  with AngularJS</h3>

<div ng-app id="ng-app">
    <hr />
    <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon glyphicon-chevron-down">Toggle</a>

    <div ng-show="collapsed">I am description for the above title, which was collapsed by default</div>
    <hr />

</div>

Upvotes: 0

Views: 756

Answers (4)

Sagar Kalokhe
Sagar Kalokhe

Reputation: 64

You just need to set the value of collapsed=true at the beginning

Upvotes: 0

zamarrowski
zamarrowski

Reputation: 483

<h3>Toggle  with AngularJS</h3>

<div ng-app id="ng-app">
<hr />
<!--use ng-class for conditions-->
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon" ng-class="{'glyphicon-chevron-down':collapsed, 'otherIcon': !collapsed}">Toggle</a>
<!--ng-show to !collapsed for default open-->
<div ng-show="!collapsed">I am description for the above title, which was collapsed by default</div>
<hr />

</div>

Upvotes: 0

greenPadawan
greenPadawan

Reputation: 1581

you can use something like this

I am description for the above title, which was collapsed by default

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

To change icon you can use ngClass

To make content visible by default , convert you ng-show to ng-hide

Try like this

<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon" ng-class="{'glyphicon-chevron-down' : !collapsed , 'glyphicon-chevron-up' : collapsed }">Toggle</a>
<div ng-hide="collapsed">I am description for the above title, which was collapsed by default</div>

DEMO

Upvotes: 1

Related Questions