How to use AngularJS to collapse various panels with unique content

Question

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same button again will close it up. If a second button is clicked, it should collapse the content for that button while closing the content from the first button. Essentially, I want it to function like a collapsible panel in Bootstrap but built solely with Angular. I have made some progress so far, but as I am new to Angular, any help would be greatly appreciated...

Here is a link to the fiddle:

<body ng-app="app">
  <div ng-controller="Test" class="container">
  <div class="custom">
    <button ng-click="show = 1" class="btn">Collapse 1</button>
    <button ng-click="show = 2" class="btn">Collapse 2</button>
      <div class="form-group" ng-show="show==1">
        <div class="sec">Showing content for Collapse 1</div>
    </div>
    <div class="form-group" ng-show="show==2">
      <div class="sec">Showing content for Collapse 2</div>
    </div>
    <div class="form-group" ng-show="show==3">
    </div>
  </div>
  </div>
</body>

javascript jquery html angularjs css

Answer 1

Answer №1

If you're looking for a solution that meets your requirements, check out this updated fiddle. It's been modified to work without bootstrap but with ng-animate for animations.

In the updated code, I've wrapped your form-group elements in a wrapper and switched from using ng-show to ng-if.

//html
<button ng-click="showDiv(1)" class="btn">collapse 1</button>
<button ng-click="showDiv(2)" class="btn">Collapse 2</button>

<div class="sec-wrp" ng-if="show === 1">
    <div class="form-group" >
      <div class="sec">show 1</div>
    </div>
</div>

 <div class="sec-wrp" ng-if="show === 2">
    <div class="form-group" >
      <div class="sec">show 2</div>
    </div>
</div>

<div class="form-group" ng-if="show==3" >
</div>

The click event now triggers a function in your controller based on the selected div to show. The controller responds by updating the $scope.show value accordingly. If the passed value matches the currentShow value, it toggles the visibility of the div.

//controller
var app = angular.module('app', ['ngAnimate']);
app.controller('Test', ['$timeout','$scope', function($timeout, $scope) {
    $scope.show = 0;
    var currentShow = 0;

    $scope.showDiv = function(int){
        $scope.show = 0;

        if(currentShow === 0){
           currentShow = int;
           $scope.show = int;
           return false;
        }

        if(currentShow === int){
           $timeout(function(){
               currentShow = 0;
               return false;
           }, 1000)
        }else{
           $timeout(function(){
               currentShow = int;
               $scope.show = int;
           }, 1000)
        }
    }

}]);

The timings in the code correspond to the transition durations in your CSS animations (ng-enter, ng-leave). Adjust the timeouts if you modify the transitions.

//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
  padding: 20px;
  border: 1px solid orangered;
  background: orange;
  height: 100px;
  z-index: 1;
}

.sec-wrp{
  overflow: hidden;
  transition: all ease 1s;
}

.sec-wrp.ng-enter{
  opacity: 0;
  height: 0;
}

.sec-wrp.ng-enter.ng-enter-active{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave.ng-leave-active{
  opacity: 0;
  height: 0;
}

I hope this solution is helpful for you.

Answer 2

If you're looking for a solution that meets your requirements, check out this updated fiddle. It's been modified to work without bootstrap but with ng-animate for animations.

In the updated code, I've wrapped your form-group elements in a wrapper and switched from using ng-show to ng-if.

//html
<button ng-click="showDiv(1)" class="btn">collapse 1</button>
<button ng-click="showDiv(2)" class="btn">Collapse 2</button>

<div class="sec-wrp" ng-if="show === 1">
    <div class="form-group" >
      <div class="sec">show 1</div>
    </div>
</div>

 <div class="sec-wrp" ng-if="show === 2">
    <div class="form-group" >
      <div class="sec">show 2</div>
    </div>
</div>

<div class="form-group" ng-if="show==3" >
</div>

The click event now triggers a function in your controller based on the selected div to show. The controller responds by updating the $scope.show value accordingly. If the passed value matches the currentShow value, it toggles the visibility of the div.

//controller
var app = angular.module('app', ['ngAnimate']);
app.controller('Test', ['$timeout','$scope', function($timeout, $scope) {
    $scope.show = 0;
    var currentShow = 0;

    $scope.showDiv = function(int){
        $scope.show = 0;

        if(currentShow === 0){
           currentShow = int;
           $scope.show = int;
           return false;
        }

        if(currentShow === int){
           $timeout(function(){
               currentShow = 0;
               return false;
           }, 1000)
        }else{
           $timeout(function(){
               currentShow = int;
               $scope.show = int;
           }, 1000)
        }
    }

}]);

The timings in the code correspond to the transition durations in your CSS animations (ng-enter, ng-leave). Adjust the timeouts if you modify the transitions.

//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
  padding: 20px;
  border: 1px solid orangered;
  background: orange;
  height: 100px;
  z-index: 1;
}

.sec-wrp{
  overflow: hidden;
  transition: all ease 1s;
}

.sec-wrp.ng-enter{
  opacity: 0;
  height: 0;
}

.sec-wrp.ng-enter.ng-enter-active{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave.ng-leave-active{
  opacity: 0;
  height: 0;
}

I hope this solution is helpful for you.

How to use AngularJS to collapse various panels with unique content

Answer №1

Similar questions

How can jQuery retrieve a string from a URL?

In this guide, learn the best way to dynamically adjust image height to match the height of any device

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

Implementing a delay using setTimeOut function to execute an action upon user input

Performing an asynchronous POST request in JavaScript

Different option for animated side slider based on location

Experiencing SyntaxError when utilizing rewire and mocha for Node.js testing. Unexpected token encountered

Is it possible to decode a two-dimensional array of objects in JSON?

Display a div every 3 seconds with the help of jQuery

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Tips for displaying axios status on a designated button using a spinner

Dimensions of CSS Buttons

Using track by in ng-repeat function triggers an endless $digest-loop issue

Transferring data from local storage to a PHP server using AJAX

Is it possible to change text dynamically with an input box using JavaScript?

"Learn how to handle exceptions in Nest JS when checking for existing users in MongoDB and creating a new user if the user does

When a block reaches a certain height, the mat-chip-list in Angular Material is automatically shortened to fit. This feature is exclusive to

When mousing over a subitem of the Image menu, ensure that the Image menu

Utilizing an Object in Option Select with ngModel

CSS table property remains unchanged following an ajax request