Issue
This Content is from Stack Overflow. Question asked by felicia
Hi guys i am a newbie to vue js and currently i am making a accordion below to expand/collapse the accordion content but there’s a problem i am facing which is the <b-icon icon="caret-up-fill" class="view-less-icon " aria-hidden="true"></b-icon> is not changing when i click . anyone can help me with this?
<div class="accordion" role="tablist">
<b-card no-body class="mb-1" style="border:none;">
<b-card-header role="tab" style="background-color:white; border: none;">
<b-row class="title" v-b-toggle.my-details>
<b-col class="mt-3 mb-0 " cols='8'> My Details</b-col>
<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" cols='4' aria-hidden="true">
<span class="when-opened"><b-icon icon="caret-down-fill" class="view-more-icon " aria-hidden="true"></b-icon></span>
<span class="when-closed"><b-icon icon="caret-up-fill" class="view-less-icon " aria-hidden="true"></b-icon></span>
</b-col>
</b-row>
</b-card-header>
<b-collapse id="my-details" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card style="border:none;" >
<b-row style="margin-bottom: 30px; border-bottom: 1px solid #EEF3F7;" >
<label for="name">Name</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-col>Name</b-col>
</b-row>
</b-col>
</b-row>
<b-row >
<label for="date">Date</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-form-input
style="border-left: 0px;"
type="text"
name="my"
v-model="form.date"
placeholder="DD/MM/YYYY"
@click="show_calendar('my_calendar')"
/>
</b-row>
</b-col>
</b-row>
<b-row >
<b-col class="mt-1 mb-0" > Description</b-col>
<b-col class="mt-2 mb-0 view-more d-flex align-items-center justify-content-end" v-b-toggle.desc-collapse cols='4'>
<span class="when-opened"><b-icon icon="chevron-down" class="view-more-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon></span>
<span class="when-closed"><b-icon icon="chevron-right" class="view-less-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon></span>
</b-col>
</b-row>
<b-collapse id="desc-collapse">
<b-card style="border:none ;" >
hello world
</b-card>
</b-collapse>
</b-card>
</b-card-body>
</b-collapse>
</b-card>
<style lang="scss" scoped>
@import "./../../_style.scss";
.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
display: none;
}
</style>
i would like to make it as when i am not clicking it will show caret down icon, when i click it will turn to caret up icon Thank you so much!!!
Solution
I’ve created a code snippet for your issue. I removed two icons and just use transform in CSS.
new Vue({
el: '#app',
}).not-collapsed .caretDownIcon {
transform: rotate(180deg);
}
.caretDownIcon {
transition: all .3s linear;
}<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.22.0/bootstrap-vue-icons.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-card no-body class="mb-1" style="border:none;">
<b-card-header role="tab" style="background-color:white; border: none;">
<b-row class="title" v-b-toggle.my-details>
<b-col class="mt-3 mb-0 " cols='8'> My Details</b-col>
<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" cols='4' aria-hidden="true">
<b-icon class="caretDownIcon" icon="caret-down-fill" class="view-more-icon " aria-hidden="true"></b-icon>
</b-col>
</b-row>
</b-card-header>
<b-collapse id="my-details" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card style="border:none;">
<b-row style="margin-bottom: 30px; border-bottom: 1px solid #EEF3F7;">
<label for="name">Name</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-col>Name</b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<label for="date">Date</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-form-input style="border-left: 0px;" type="text" name="my" placeholder="DD/MM/YYYY" />
</b-row>
</b-col>
</b-row>
<b-row>
<b-col class="mt-1 mb-0"> Description</b-col>
<b-col class="mt-2 mb-0 view-more d-flex align-items-center justify-content-end" v-b-toggle.desc-collapse cols='4'>
<span class="when-opened">
<b-icon icon="chevron-down" class="view-more-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon>
</span>
<span class="when-closed">
<b-icon icon="chevron-right" class="view-less-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon>
</span>
</b-col>
</b-row>
<b-collapse id="desc-collapse">
<b-card style="border:none ;">
hello world
</b-card>
</b-collapse>
</b-card>
</b-card-body>
</b-collapse>
</b-card>
</div>
This Question was asked in StackOverflow by felicia and Answered by Iman Shafiei It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.