Error: The `multiple` attribute can't be found

[mromarreyes]

I'm receiving this error when I have more than one 'expanded' on v-pane.

<v-accordion class="vAccordion--default" multiple control="accordion">
            <!-- add expanded attribute to open the section -->
            <v-pane expanded>
              <v-pane-header>
                <label><b><a><span class="glyphicon glyphicon-file"></span> Step 1 - Pet Information / Select a Pet - {{pet.petname}}</a></b></label>
              </v-pane-header>

              <v-pane-content>
                <div class="col-sm-12 table-responsive">
                  <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                      <tr>
                        <td>  
                          <h2><a ui-sref="petMod({userid: {{userid}}, petid: {{petid}}})" target="_blank">{{pet.petname}}</a></h2>

                          <img class="img-responsive" ng-src="./assets/img/petpics/{{pet.pathtopic}}" ng-if="pet.pathtopic !== null" width="240">
                          <img class="img-responsive" src="./assets/img/default_dog.jpg" ng-if="pet.pathtopic === null" width="240">

                          <label>
                            <h3>{{pet.breedname}}</h3><br>
                            <b>Description:</b> {{pet.petdesc}}<br>
                            <b>Gender / Status:</b> {{pet.gender}} / {{pet.neuterstate}}<br>
                            <b>Weight:</b> {{pet.weight | number}}<br>
                            <b>Birthdate:</b> {{pet.birthdate | date}}<br><br>
                            <b>Owner:</b> <a ui-sref="ownerMod({userid: {{userid}}})" target="_blank">{{owner.firstname}} {{owner.lastname}}</a><br>
                            <b>Contact Info:</b> <br>(h) <a href="tel:{{owner.homephone}}">{{owner.homephone | tel}}</a> <br>(e) <a ui-sref="emailOwner({userid: {{userid}}})">E-mail</a><br>
                          </label>
                        </td>
                        <td>
                          <label>
                            <b>Pet Notes:</b></br>
                            <div ng-if="pet.notes <= 0 || pet.notes === null">
                              <i>No Available Notes</i></br></br>
                            </div>
                          </label>
                            <div ng-repeat="note in pet.notes">
                              <a style="display:block; background-color: {{note.bgcolor}}; color: {{note.fontcolor}}" ng-bind="note.notetype + ' - ' + formatDate(note.notedate) + ': ' + note.note"></a>
                            </div>
                          <br>

                          <label>
                            <b>Advisories:</b></br>
                            <div ng-if="pet.adv <= 0 || pet.adv === null">
                              <i>No Advisories</i></br>
                            </div>
                            <div ng-repeat="adv in pet.adv">
                              {{adv.trait}}
                            </div>
                          </label>
                          <br><br>
                          <label><b>Associated Pets (Select checkbox to add additional appointment):</b><br></label>
                          <div class="col-sm-12 table-responsive">
                            <table class="table table-striped table-condensed">
                              <tbody>
                                <tr>
                                  <td>
                                    <input type="checkbox" name="petids[]" value="{{pet.petid}}" checked></br>
                                  </td>
                                  <td>
                                    <label><b>{{pet.petname}}</b> ({{pet.breedname}})   weight: {{pet.weight | number}}</label>
                                  </td>
                                </tr>
                                <tr ng-repeat="assocPet in assocPets" ng-if="assocPet.petid !== pet.petid">
                                  <td>
                                    <input type="checkbox" name="petids[]" value="{{assocPet.petid}}" ></br>
                                  </td>
                                  <td>
                                    <label><b>{{assocPet.petname}}</b> ({{assocPet.breedname}})   weight: {{assocPet.weight | number}}</label>
                                  </td>
                                </tr>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </v-pane-content>
            </v-pane>

            <v-pane expanded>
              <v-pane-header>
                <label><b><a><span class="glyphicon glyphicon-th-list"></span> Step 2 - Select the Services</a></b></label>
              </v-pane-header>

              <v-pane-content>
                <div class="col-sm-12 table-responsive">
                  <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                      <tr>
                        <td class="col-sm-3"> 
                          <div class="form-group-sm col-sm-12">
                            <label for="stid">Select a Service Type</label>
                            <select class="form-control" name="stid" ng-options="type.servicetype for type in serviceTypes track by type.stid" ng-model="selectedType" ng-change="populateProducts(selectedType.stid)" data-validation="required stid" data-validation-help="Select a service type">
                              <option value="" selected="selected">Select a Service Type</option>
                            </select>
                          </div>
                        </td>
                        <td class="col-sm-9">
                          <div class="col-sm-9">
                            <h2>Available Services</h2>
                          </div>
                          <div class="col-sm-3 form-group-sm">
                            <label>Product Filter:</label> <input type="text" class="form-control" ng-model="searchField">
                            <a class="clear" ng-click="searchField = ''">Clear</a>
                          </div>

                          <div class="form-group col-sm-12 text-center" ng-if="products.length <= 0 || products.length === undefined">
                            <label>There are no products or services for sale with the selected type. Select a Service Type from the left to populate possible products and services.</label>
                          </div>
                          <div class="col-sm-12 table-responsive" ng-if="products.length > 0">
                            <table class="table table-striped table-bordered table-hover table-condensed">
                              <thead>
                                <tr>
                                  <th><label>Product Name</label></th>
                                  <th><label>SKU</label></th>
                                  <th><label>Product Type</label></th>
                                  <th><label>Qty</label></th>
                                  <th><label>Price</label></th>
                                  <th><label>Add</label></th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr ng-repeat="product in products | filter:searchField">
                                  <td><label>{{product.servicename}}</label></td>
                                  <td><label>{{product.sku}}</label></td>
                                  <td><label>{{selectedType.servicetype}}</label></td>
                                  <td><div class="form-group-sm"><input type="text" class="form-control" name="qty_{{product.serviceid}}" value="1" size="3"></div></td>
                                  <td><div class="form-group-sm"><input type="text" class="form-control" name="price_{{product.serviceid}}" value="{{product.price}}" size="3"></div>
                                  </td>
                                  <td><input type="checkbox" name="check_{{product.serviceid}}" value="{{product.serviceid}}"></td>
                                </tr>     

                              </tbody>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </v-pane-content>
            </v-pane>
          </v-accordion>

[mromarreyes]

Any updates?

[LukaszWatroba]

@mromarreyes please try the new release.

[gilad905]

This still happens on v1.6.0: http://codepen.io/gilad905/pen/xgZxLB

[GeorgeChackungal]

I was able to solve this by multiple="true"

[el-ethan]

I am also experiencing this issue in v1.6.0. For me, the issue seems to be a race when you collapse one panel and expand another too quickly (before the expanded attribute on the former is set to false?). Setting multiple doesn't work for me, because I don't want multiple panels open at once. Is there another solution?

[parishishah24]

@el-ethan Did you get any solution ? we are also facing same issue, as we also need only one pane opened at a time.