Adminlte: Accordion Items

[berkatiImad]

Hello,
How can i make my accordion show just 1 item at a time ?? i mean when i click in fa-plus i wanna see just the current box-body and close the others !

this is my probleme :

Regards.

[93ramadan]

Hey @berkatiImad,

I think you got things a little mixed up between Accordions and Boxes.

Based on the screen shot provided, it looks like you're using boxes and not accordion items. This does not mean it is not do-able, it will just require a little bit of more work.

Make sure you check the theme provided Accordions and see how they have been created and make your adjustments.

Hope this helps,

[berkatiImad]

yes bro i use Boxes but i wanna open just one box in a time
this is the code : i have many boxes with ng-repeat but i wanna when i open a box all the others close.

Thanks,

[almasaeed2010]

Hi,

Check out the General UI pages and scroll down to accordion https://almsaeedstudio.com/themes/AdminLTE/pages/UI/general.html

I think you'll find what you want there.

Thanks!

[berkatiImad]

Hi,
Sir I can't work with this accordion because it has a href with href="#collapseOne", and i'm working with Angular Js (Routing), so When i use this code and open my accordion item i have this probleme !!

Routing in AngularJs :

Please if you have another solution for me :( i'm lost !
Thanks,

[suvjunmd]

Hey @berkatiImad,

Please insert your controller and template code (not screenshots), so I can help you.

[berkatiImad]

Hi @suvjunmd

ok this is my template :

<form  ng-submit="" name="myform">
              <div ng-repeat="itemToAdd in itemsToAdd">

<div class="box box-primary">

    <div class="box-header with-border">
        <h3 class="box-title"> Zone {{itemsToAdd.indexOf(itemToAdd)+1}} <span style="color: red;" ng-show="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].MyHidezone"> Find some Errors in this Zone</span> </h3>
        <div class="box-tools pull-right"> 
           <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button ng-hide="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].MyHideValue" ng-click="removezone(itemsToAdd.indexOf(itemToAdd))" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div> </div> 
         <div class="box-body collapse {{itemsToAdd[itemsToAdd.indexOf(itemToAdd)].in }}">
                <div style="padding-left: 4%; padding-bottom: 15px; " class="row">

                     <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">Zone Center</div>
                     <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                         <input style="margin-bottom: 20px; height:33px;" name="pickup" ng-model="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].address" vs-google-autocomplete="options"  vs-latitude="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].lat"
                            vs-longitude="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].long" vs-city="zone.city" type="text" class="form-control raduis" placeholder="Zone Center" size="30" />
                         <span ng-show="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].FalseOrTrueAdresse" style="color: red;">{{itemsToAdd[itemsToAdd.indexOf(itemToAdd)].adressemsg}}</span>
                     </div>

            </div>

                                         <div style="padding-left: 4%;  padding-bottom: 15px;" class="row">

                     <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">Zone Rayon</div>
                      <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"> 
                          <input style="margin-bottom: 2%; height:33px ;" id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" name="pickup" ng-model="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].rayon" ng-keyup="rayonChange(itemToAdd)" class="form-control raduis" placeholder="Zone Rayon" size="30" />
                         <span ng-show="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].FalseOrTrueRayon" style="color: red;">{{itemsToAdd[itemsToAdd.indexOf(itemToAdd)].rayonmsg}}</span>

                      </div>


                 </div>


                 <div style="padding-left: 4%; padding-bottom: 15px;" class="row">
                     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> Add to your calandar</div>
                     <span ng-repeat="jour in jours" >
         <input   id="{{jour.idJour+7*itemsToAdd.indexOf(itemToAdd)}}" type="checkbox" ng-click="check(jour.idJour,itemToAdd)"/><label for="{{jour.idJour+7*itemsToAdd.indexOf(itemToAdd)}}">{{jour.name}}</label>
    </span>
       <span ng-show="itemsToAdd[itemsToAdd.indexOf(itemToAdd)].FalseOrTrueDays" style="color: red;">{{itemsToAdd[itemsToAdd.indexOf(itemToAdd)].daysmsg}}</span>


                 </div>

         </div>

</div>       
                                 </div>


                                 </form>

this is my controller ( just the table itemsToAdd ) i don't have a code in Angular Js for my accordion ... i use just Boxes of AdminLTE :

$scope.itemsToAdd = [{

           in:'in',
           daysmsg:'',
           rayonmsg:'',
           adressemsg:'',
            FalseOrTrueDays:false,

           FalseOrTrueAdresse:false,
           FalseOrTrueRayon:false,
           MyHidezone:false,
             MyHideValue:true,
                zoneadd: '',
                zonedit: '',
                address: '',
                rayon:'',
                lat: '48.8534100',
                long: '2.3488000',
                calendries:[]
            }];

Thanks,

[suvjunmd]

@berkatiImad, here you go: https://plnkr.co/edit/qaag8b?p=preview

[berkatiImad]

@suvjunmd Thank you it works my brother you are the best :) thank you very much .

[almasaeed2010]

I am glad you got your issue solved :+1:

Thanks @suvjunmd