AngularUI bootstrap toggle selected element

Question

I'm a noob about angular. I need a way to toggle only one element on a page.

Here is the plunker: http://plnkr.co/edit/W1eqgKiv5wv0hNkLDuzb?p=preview

If I click a button all the div are toggled/collapsed, but I need a way to collapse/toggle only the child element.

msduk · Accepted Answer · 2013-09-07 14:37:25Z

0

How about each model div controls its own destiny...

Plunker: http://plnkr.co/edit/rBCB9CflM7TsEEK5IAk1?p=preview

<div>
  <button ng-model="collapsed1" ng-click="collapsed1 = !collapsed1">Toggle collapse</button>
  <div ng-show="collapsed1">
    <div class="well well-large">Some content</div> 
  </div>
</div>

answered Sep 7, 2013 at 14:37

msduk

843 bronze badges

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

2 Comments

Tropicalista Over a year ago

I've reach the same solution. Thanks!! But what to do to make each collapsible panel collapsed by default? should I declare each scope as false?

msduk Over a year ago

Invert the ng-show with ng-hide or invert the collapsed to be !collapsed1

Collectives™ on Stack Overflow

AngularUI bootstrap toggle selected element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related