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

Я создал аккордеонное меню Boostrap 4 с символом + и -. Символ меняется по мере того, как он свернут и не свернут.

Я добавляю символ с: после

Однако я хотел бы заменить его кнопкой, а не символом "-,+". Так что для меня будет 2 кнопки, которые будут выглядеть как "Видеть больше","Видеть меньше" (это может быть та же кнопка с другим текстом и фоном) и изменяться при нажатии

Я не мог понять это.

Мой код и демо: https://www.codeply.com/go/sOps2WhtG5

<div class="container">
<div id="accordion" class="accordion">
    <div class="card mb-0">
        <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
            <a class="card-title">
                Item 1
            </a>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            <a class="card-title">
              Item 2
            </a>
        </div>
        <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            <a class="card-title">
              Item 3
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordion" >
            <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. samus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Мой css

.accordion .card-header:after {
    font-family: 'FontAwesome';  
    content: "\f068";
    float: right; 
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067"; 
}
Источник

1 ответ

В вашем примере вы используете div.card-header как коллапс коллапса; Вы намерены ограничить триггерный переключатель только кнопкой? Если это так, рассмотрите возможность изменения a.card-title в div.card-title и добавьте свой button в. Затем настройте свой CSS на .card-header button:after, Обратите внимание, что вы должны использовать только href атрибут на теге привязки (у вас есть на вашем div.card-header) и для button элемент, который вы бы использовали data-target, Вы можете просмотреть документацию здесь.

Если ваше намерение состоит в том, чтобы иметь более сложную разметку (а не просто текстовую метку), вам понадобится решение js. (Я могу помочь с этим также)

НТН

.accordion .card-header button:after {
    font-family: 'FontAwesome';  
    content: "\f068";
}
.accordion .card-header button.collapsed:after {
    content: "\f067";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
<div id="accordion" class="accordion">
    <div class="card mb-0">
        <div class="card-header">
            <div class="card-title">
                Item 1
                <button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseOne"></button>
            </div>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header">
            <div class="card-title">
              Item 2
              <button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseTwo"></button>
            </div>
        </div>
        <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
            craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Источник 

.accordion .card-header:after {
    content: "See less";
    float: right; 
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "See more"; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
<div id="accordion" class="accordion">
    <div class="card mb-0">
        <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
            <a class="card-title">
                Item 1
            </a>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            <a class="card-title">
              Item 2
            </a>
        </div>
        <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            <a class="card-title">
              Item 3
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordion" >
            <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. samus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
это одно решение для этого. Надеюсь это поможет

Источник 

.accordion .card-header button:after {
    content: "See less";
}
.accordion .card-header button.collapsed:after {
    content: "See more";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
<div id="accordion" class="accordion">
    <div class="card mb-0">
        <div class="card-header">
            <div class="card-title">
                Item 1
                <button type="button" class="btn btn-primary btn-sm float-right collapsed" data-toggle="collapse" data-target="#collapseOne"></button>
            </div>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
                craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
        <div class="card-header">
            <div class="card-title">
              Item 2
              <button type="button" class="btn btn-primary btn-sm float-right collapsed" data-toggle="collapse" data-target="#collapseTwo"></button>
            </div>
        </div>
        <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
            craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Я адаптировал код в соответствии с вашими требованиями, с учетом вышеупомянутых ответов от @jcruz а также @uday,

Источник
Другие вопросы по тегам