我只想在折叠状态下更改图标：未定义-> attr：

Question

我正在尝试仅使折叠的咏叹调显示不同的箭头。 到目前为止，我尝试过的大多数代码仅在一个折叠的元素上起作用，但是如果第二个图块单击时，第一个箭头的方向错误，然后将第二个箭头转向第二个。

我尝试使用两个具有过渡功能的css类来旋转，但是在fastclickers中遇到问题。如果您单击得非常快，箭头将无法转动两次

---

$(document).ready(function () {
$(".btn-link")
    .on(attr("aria-expanded", "true"), (function () {
        $(this).parent().find('fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up');
    })
    .on(attr("aria-expanded", "false"), (function () {
        $(this).parent().find('fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down');
    }))); });






     <!-- Accordion Liste-->
        <div class="accordion" id="accordionListe">
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingOne2">
                    <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
                            aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode1"></div>
                            <script type="text/javascript">
                                var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
                                    text: "www.sfdbvsd",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>Ein Gutschein für eine Premium Wäsche!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

我建议采用另一种方法：在子元素上使用.toggleClass( className )：

$(".btn-link").on('click', function (e) {
    $(this).find('i').toggleClass('fa-angle-down fa-angle-up')
});

请避免使用重复的ID，例如kundenKarteBack或gutscheinDaten。 ID必须是唯一的。

根据您的评论有两种解决方案：

1. 使用fa-angle-up类而不是fa-angle-down类设置第一个 i 标签
2. ...或更改事件处理程序条件

喜欢：

$(".btn-link").on('click', function (e) {
    if ($(this).is('.collapsed')) {
        $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
    } else {
        $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
    }
});

$(".btn-link").on('click', function (e) {
    if ($(this).is('.collapsed')) {
        $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
    } else {
        $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingOne2">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
                        aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode1"></div>
                </div>


                <hr>
                <p>Ein Gutschein für eine Premium Wäsche!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingTwo2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
                        aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
             data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode2"></div>
                </div>


                <hr>
                <p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
                        aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode3"></div>
                </div>
                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
                        aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode4"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
                        aria-expanded="false" aria-controls="Gutschein5">
                    <span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode5"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
                        aria-expanded="false" aria-controls="Gutschein6">
                    <span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode6"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Accordion Liste-->

无论如何，您都可以使用accordion events，在这种情况下，您的处理程序将是：

$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
    if (e.type == 'show') {
        $(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
    } else {
        $(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
    }
});

$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
    if (e.type == 'show') {
        $(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
    } else {
        $(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingOne2">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
                        aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode1"></div>
                </div>


                <hr>
                <p>Ein Gutschein für eine Premium Wäsche!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingTwo2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
                        aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
             data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode2"></div>
                </div>


                <hr>
                <p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
                        aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode3"></div>
                </div>
                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
                        aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode4"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
                        aria-expanded="false" aria-controls="Gutschein5">
                    <span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode5"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
                        aria-expanded="false" aria-controls="Gutschein6">
                    <span class="pull-left">Guthaben</span>
                    <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                </button>
            </h5>
        </div>
        <div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
            <div class="card-body">
                <div class="container" id="kundenKarteBack">
                    <div id="qrcode6"></div>
                </div>


                <hr>
                <p>10€ Auf Ihre nächste Tankfüllung!</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Von: 11.11.2018</p>
                        </div>
                        <div class="col-sm-5">
                            <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="container" id="kundenKarteBack">
                    <svg id="barcode1"></svg>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Accordion Liste-->

Answer 2

这是我关于stackoverflow的第一个问题，我认为我采用了错误的方法。对不起4。 这是更多代码，可能有助于理解我的问题。

---

 <!-- Accordion Liste-->
        <div class="accordion" id="accordionListe">
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingOne2">
                    <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
                            aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode1"></div>
                            <script type="text/javascript">
                                var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>Ein Gutschein für eine Premium Wäsche!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingTwo2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
                            aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
                    data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode2"></div>
                            <script type="text/javascript">
                                var qrcode2 = new QRCode(document.getElementById("qrcode2"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
                            aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode3"></div>
                            <script type="text/javascript">
                                var qrcode3 = new QRCode(document.getElementById("qrcode3"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
                            aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode4"></div>
                            <script type="text/javascript">
                                var qrcode4 = new QRCode(document.getElementById("qrcode4"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
                            aria-expanded="false" aria-controls="Gutschein5">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode5"></div>
                            <script type="text/javascript">
                                var qrcode5 = new QRCode(document.getElementById("qrcode5"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
                            aria-expanded="false" aria-controls="Gutschein6">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode6"></div>
                            <script type="text/javascript">
                                var qrcode6 = new QRCode(document.getElementById("qrcode6"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingTwo2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein11"
                            aria-expanded="false" aria-controls="Gutschein11">
                            <span class="pull-left">Kaffee</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein11" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
                    data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode7"></div>
                            <script type="text/javascript">
                                var qrcode7 = new QRCode(document.getElementById("qrcode7"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein7"
                            aria-expanded="false" aria-controls="Gutschein7">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein7" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode8"></div>
                            <script type="text/javascript">
                                var qrcode8 = new QRCode(document.getElementById("qrcode8"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein8"
                            aria-expanded="false" aria-controls="Gutschein8">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein8" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode9"></div>
                            <script type="text/javascript">
                                var qrcode9 = new QRCode(document.getElementById("qrcode9"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button id="scroller" class="btn btn-link collapsed" type="button" data-toggle="collapse"
                            data-target="#Gutschein9" aria-expanded="false" aria-controls="Gutschein9">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein9" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode10"></div>
                            <script type="text/javascript">
                                var qrcode10 = new QRCode(document.getElementById("qrcode10"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card z-depth-0 bordered">
                <div class="card-header" id="headingThree2">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein10"
                            aria-expanded="false" aria-controls="Gutschein10">
                            <span class="pull-left">Guthaben</span>
                            <i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
                        </button>
                    </h5>
                </div>
                <div id="Gutschein10" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
                    <div class="card-body">
                        <div class="container" id="kundenKarteBack">
                            <div id="qrcode11"></div>
                            <script type="text/javascript">
                                var qrcode11 = new QRCode(document.getElementById("qrcode11"), {
                                    text: "www.otas.at",
                                    width: 128,
                                    height: 128,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            </script>
                        </div>


                        <hr>
                        <p>10€ Auf Ihre nächste Tankfüllung!</p>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Von: 11.11.2018</p>
                                </div>
                                <div class="col-sm-5">
                                    <p id="gutscheinDaten">Gült.: 11.11.2019</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="container" id="kundenKarteBack">
                            <svg id="barcode1"></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Accordion Liste-->