CODEWITHSUNDEEP
angularjs
user6112430
user6112430

Reputation:

Angular JS accordion bug

Here is my html code but I think ng-init isn't working. 

     <div ng-init="accordion=1">
        <h3 class="accordion" ng-class="{active:accordion==1}">
           <a href ng-click="accordion = 1">Section 1</a>
        </h3>
        <p class="accordion-content" ng-show="accordion==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>

        <h3 class="accordion" ng-class="{active:accordion==2}">
           <a href ng-click="accordion = 2">Section 2</a>
        </h3>
        <p class="accordion-content" ng-show="accordion==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>

        <h3 class="accordion" ng-class="{active:accordion==3}">
           <a href ng-click="accordion = 3">Section 3</a>
        </h3>
        <p class="accordion-content" ng-show="accordion==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
     </div>

I hope this could hope work as follow at the first time but it isn't working properly

enter image description here

But it shows like this.

enter image description here

I'm sure there might be no problem in js and styling work.

Please have a look here. https://jsfiddle.net/koaqayb3/11/

I have one module already and would like to know how to integrate both of these.

var module = angular.module('myApp', ['ngAnimate', 'ngTouch','ngScrollbars','']);

var app = angular.module('myApp',[]);

Thanks in advance.

Upvotes: 0

Views: 74

Answers (2)

henrikmerlander
henrikmerlander

Reputation: 1574

Fixed it for you. You declared that your module has some dependencies for other modules, which you did not include in your fiddle. I just removed the dependencies in your module declaration like this:

var module = angular.module('myApp', []);

Updated fiddle: https://jsfiddle.net/koaqayb3/13/

Upvotes: 0

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

Your fiddle is not working because of the module dependencies defined inside

var module = angular.module('myApp', ['ngAnimate', 'ngTouch','ngScrollbars']);

the app cannot got 'ngAnimate', 'ngTouch','ngScrollbars' these dependencies in your fiddle remove them and it seems working fine.

Fiddle

Hope it helps

Upvotes: 0

Related Questions