AngularJS: How to display element by default and toggle it when a button is pressed

Question

I need to toggle an element that needs to be initially visible. In my case the toggle works fine but the element (menu class) is initially hidden...

JSFIDDLE

Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed">
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </div>
</div>

Community · Accepted Answer · 2017-05-23 11:33:16Z

1

If not initialized, the default value of collapsed is false. You can initialize scope.collapsed = true in your controller or directive instead of using ng-init because ng-init is costly.

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Mar 28, 2016 at 14:30

Ealon

4,9389 gold badges38 silver badges68 bronze badges

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

Comments

asdf_enel_hak · Accepted Answer · 2016-03-28 13:55:34Z

0

instead of

<div class="menu" ng-show="collapsed">

use this line:

<div class="menu" ng-show="!collapsed">

fiddle

answered Mar 28, 2016 at 13:55

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

1 Comment

Hadi Over a year ago

what is deference with OP post?

Okdan · Accepted Answer · 2016-03-28 13:56:36Z

0

You can use ng-init="expression" or set in a controller, but I prefer ng-init, since it propagates.

answered Mar 28, 2016 at 13:56

Okdan

481 silver badge8 bronze badges

Collectives™ on Stack Overflow

AngularJS: How to display element by default and toggle it when a button is pressed

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related