Angular way to open and close panels

Question

In Angular if I had a few panels, similar to tabs how do you open the panel on click and animate it up, if I click a different panel new html is loaded in, but if I click an open panel it needs to animate down.

Almost exactly like http://plnkr.co/edit/?p=preview however 3 of them.

I've looked at both ngRouter and UI-Router, I think UI-Router is closer to what I need because you can remove a view.

Answer 1

I created a plnkr to show something similar, but you'll have to tweak the CSS transitions.

This is using ngAnimate and CSS transitions to control the animations.

Markup:

<div class="tab-area" ng-switch on="activeTab">
  <div class="tab tab1" ng-switch-when="1">
    <h1>tab 1 content</h1>
  </div>
  <div class="tab tab2" ng-switch-when="2">
    <h1>tab 2 content</h1>
  </div>
</div>
<ul>
  <li ng-click="setTab(1)">tab 1</li>
  <li ng-click="setTab(2)">tab 2</li>
</ul>

JavaScript:

$scope.activeTab = 0;
$scope.setTab = function(tabId){
  $scope.activeTab = $scope.activeTab===tabId ? 0 : tabId;
};

Answer 2

angular-ui is definitely what you want, you can see that their sample site is almost a complete recreation of your posted jQuery example.