-
Notifications
You must be signed in to change notification settings - Fork 0
/
accordion.vue
114 lines (106 loc) · 2.76 KB
/
accordion.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div>
<h2>Animated Accordion</h2>
In this example we have added a "plus" sign to each button. When the user
clicks on the button, the "plus" sign is replaced with a "minus" sign.
<div v-for="(section, index) in data" :key="index">
<button ref="acc" @click="handleSectionNum(index)" class="accordion">
{{ section.title }}
</button>
<div class="panel">
<p>{{ section.content }}</p>
</div>
</div>
</div>
</template>
<script>
const data = [
{
title: `Section 1`,
content: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.`,
},
{
title: `Section 2`,
content: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.`,
},
{
title: `Section 3`,
content: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.`,
},
];
export default {
data() {
return {
data: data,
selected: [],
};
},
methods: {
handleSectionNum(index) {
if (this.selected.includes(index)) {
this.selected = this.selected.filter(item => item !== index);
} else {
this.selected.push(index);
}
for (let item = 0; item < this.data.length; item++) {
let now = this.$refs.acc[item];
let panel = now.nextElementSibling;
if (this.selected.includes(item)) {
now.classList.add('active');
panel.classList.add('show');
} else {
now.classList.remove('active');
panel.classList.remove('show');
}
}
},
},
};
</script>
<style scoped>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.show {
max-height: 68px;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: '\2796'; /* Unicode character for "minus" sign (-) */
}
</style>