Хотелось бы поменять иконку только на свернутую: Getting-> attr не определено:

Question

Я пытаюсь сделать только свернутую арию, чтобы показать другую стрелу.Большая часть кода, который я пробовал до сих пор, работает только на одном свернутом элементе, но оставляет возможность щелкнуть по второй плитке в неправильном направлении первой стрелки и повернуть вторую.

Я пытался использовать два класса CSS с переходомвращаться, но были проблемы с быстрыми щелчками.если вы нажмете очень быстро, стрелка не сможет повернуться дважды

---

$(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

Это был мой первый вопрос по 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-->

Answer 2

Я бы предложил другой подход: .toggleClass (className) для дочернего элемента:

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

Пожалуйста, избегайте дублированных идентификаторов, таких как kundenKarteBack или gutscheinDaten.Идентификатор должен быть уникальным.

Согласно вашему комментарию есть два решения:

1. установить первый тег i с классом fa-angle-up вместоfa-angle-down
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-->

В любом случае вы можете использовать события аккордеона , и в этом случае ваш обработчик будет:

$(".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-->