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

Obtaining Values from Identical jQuery Buttons with the Same Class名称

Storing data using mongoose does not alter the existing information

Gulp is ensuring the destination file remains unchanged

The random string generator is selecting a unique string for both the server and client side

Step-by-step guide on how to effectively send a NodeJS request and stream it into a separate response

argument sent to component yields a result of undefined value

Creating an AngularJS factory that integrates with a Parse.com database

Click a button to switch the visibility of a section in an

What is the method for retrieving post ID with the Google Feed API?

Discovering the significance of a function's scope

Struggling to employ JavaScript events when submitting a form to verify the fields

Is there a way to make a try-catch block pause and wait for a response before moving

Using Ruby instead of Javascript in lessc

JavaScript and HTML are commonly used programming languages for developing

Exploring the application of the PUT method specific to a card ID in vue.js

housing the picture within a CSS grid

Foundation Unveil Modal hidden from view

Mastering the art of utilizing v-if and v-for with nested objects in Vue.js

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

Display the React component following a redirect in a Next.js application that utilizes server-side rendering