Рубрики

Как изменить (-, +) символ с помощью кнопки в Bootstrap Accordion?

В Bootstrap 4 нет опции по умолчанию для замены (-, +) символа с помощью гармошки. Следовательно, это можно сделать с помощью jQuery. Следующий подход объяснит ясно.

Подходить:

  • Шрифт awesome или любой значок утилиты для отображения символа (-, +):

    <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”>

  • Преобразуйте тег div с class = ”card-header” в кнопку следующим образом: Вы можете использовать атрибуты data-target и data-toggle на любой кнопке для создания баяна кнопки. Наконец, используйте метод jQuery toggleClass () для изменения символа (-, +) с помощью кнопки Bootstrap Accordion. В fontawesome, class = ”fas fa-plus” для символа плюс и class = ”fas fa-minus” для символа плюс.

    <div class="card-header collapsed card-link"

    data-toggle="collapse" 

    data-target="#collapseid">

        

        Collapsible Header title

        

    </div>

      
    <! - преобразовать вышеуказанный код в кнопку ->

      

     <button class="card-header collapsed card-link"

    data-toggle="collapse" data-target="#collapseid">

        

        <b class="header-title float-left">

        Collapsible Header title</b>

        <i class="fas fa-plus float-right "></i>

        

    </button>

Синтаксис:

$(selector).toggleClass('fas fa-plus fas fa-minus');

Пример 1: Ниже приведен пример того, как изменить символ на баяне с помощью jQuery.

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="utf-8">

    <meta name="viewport"

        content="width=device-width, initial-scale=1">

  

    <link rel="stylesheet" href="

https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  

    <link rel="stylesheet"

        href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"

        integrity=

"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"

        crossorigin="anonymous">

  

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

    </script>

  

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

    </script>

  

    <script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

    </script>

  

    <style>

        button:focus {

            outline-color: black;

        }

    </style>

</head>

  

<body>

    <center>

        <div class="container">

            <h1 style="color:green;padding:13px;">

                GeeksforGeeeks

            </h1>

            <br>

              

            <div id="accordion">

                <div class="card">

                    <button class="card-header collapsed card-link"

                            data-toggle="collapse"

                            data-target="#collapseOne">

  

                        <b class="header-title float-left">

                            Accordian Menu Item #1

                        </b>

                        <i class="fas fa-plus float-right "></i>

                    </button>

                      

                    <div id="collapseOne" class="collapse"

                            data-parent="#accordion">

                        <div class="card-body">

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </div>

                    </div>

                </div>

                <div class="card">

                    <button class="card-header collapsed card-link"

                            data-toggle="collapse"

                            data-target="#collapseTwo">

  

                        <b class="header-title float-left">

                            Accordian Menu Item #2</b>

                        <i class="fas fa-plus float-right "></i>

                    </button>

                      

                    <div id="collapseTwo" class="collapse"

                            data-parent="#accordion">

                        <div class="card-body">

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </div>

                    </div>

                </div>

                  

                <div class="card">

                    <button class="card-header collapsed card-link"

                            data-toggle="collapse"

                            data-target="#collapseThree">

  

                        <b class="header-title float-left">

                            Accordian Menu Item #3

                        </b>

                        <i class="fas fa-plus float-right "></i>

  

                    </button>

                    <div id="collapseThree" class="collapse"

                            data-parent="#accordion">

                        <div class="card-body">

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </center>

      

    <script>

        $('.card-header').click(function() {

            $(this).find('i').toggleClass('fas fa-plus fas fa-minus');

        });

    </script>

  

</body>

  

</html>

Выход:

Пример 2: Ниже приведен пример того, как изменить символ на складной кнопке с помощью jQuery.

<!DOCTYPE html>

<html lang="en">

   

<head>

    <meta charset="utf-8">

    <meta name="viewport"

          content="width=device-width, initial-scale=1">

  

    <link rel="stylesheet" href="

https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  

    <link rel="stylesheet"

          href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"

          integrity=

"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"

          crossorigin="anonymous">

  

    <script src="

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

    </script>

  

    <script src="

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

    </script>

  

    <script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

    </script>

</head>

   

<body>

    <center>

        <div class="container">

            <h1 style="color:green;padding:13px;">

                GeeksforGeeeks

            </h1>

            <br>

              

            <div id="accordion btn-group">

                <button type="button"

                        class="card-btn btn btn-info"

                        data-toggle="collapse"

                        data-target="#collapseOne">

   

                    <b class="header-title float-left">

                        Menu#1</b>    

                    <i class="fas fa-plus float-right "></i>

                </button>

   

                <button type="button"

                        class="card-btn btn btn-warning"

                        data-toggle="collapse"

                        data-target="#collapseTwo">

   

                    <b class="header-title float-left">

                        Menu#2</b>    

                    <i class="fas fa-plus float-right "></i>

                </button>

                   

                <button type="button"

                        class="card-btn btn btn-danger"

                        data-toggle="collapse"

                        data-target="#collapseThree">

   

                    <b class="header-title float-left">

                        Menu#3</b>    

                    <i class="fas fa-plus float-right "></i>

                </button>

   

                <div id="collapseOne" class="collapse">

                    <div class="card-body">

                        <b>Menu#1</b>

                        <br/>

                        <p class="text-info"

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </p>

                    </div>

                </div>

   

                <div id="collapseTwo" class="collapse">

                    <div class="card-body">

                        <b>Menu#2</b>

                        <br/>

                        <p class="text-warning "

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </p>

                    </div>

                </div>

   

                <div id="collapseThree" class="collapse">

                    <div class="card-body">

                        <b>Menu#3</b>

                        <br/>

                        <p class="text-danger"

                            GeeksforGeeks is a Computer Science portal

                            for geeks. It contains well written, well

                            thought and well explained computer science

                            and programming articles, quizzes etc.

                        </p>

                    </div>

                </div>

            </div>

       </div>

    </center>

    <script>

        $('.card-btn').click(function() {

            $(this).find('i').toggleClass('fas fa-plus fas fa-minus')

        });

    </script>

</body>

   

</html>

Выход:

Ссылка: https://api.jquery.com/toggleClass/#toggleClass-className

Рекомендуемые посты:

Как изменить (-, +) символ с помощью кнопки в Bootstrap Accordion?

0.00 (0%) 0 votes