xxxxxxxxxx1
2
<div class="accordion" id="accordionExample275" aria-multiselectable="true">3
<div class="card z-depth-0">4
<div class="card-header" role="tab" id="headingOne"> 5
<h5 class="mb-1">6
7
<button id="first-button" class="btn btn-link" type="button" data-toggle="collapse" data-target=".multi-collapse"8
aria-expanded="false" aria-controls="collapseOne2 collapseOne3" style="font-size:20px" > 9
<p id="text">Still Have More Questions? We Have More Answers.</p> 10
<div class="center">11
<button class="button1 button1" type="button" data-toggle="collapse" id="collapseOne1" data-target=".multi-collapse"12
aria-expanded="false" aria-controls="collapseOne2 collapseOne3">View FAQ</button>13
</div>14
</button>15
</h5>16
</div> 17
<h5>18
<div class="collapse multi-collapse" >19
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne2" data-target="#collapseOne3"20
aria-expanded="true" aria-controls="collapseOne3" style="font-size:20px"> 21
Question #122
</button>23
</div>24
</h5>25
<div class="collapse multi-collapse">26
<div id="collapseOne3" class="collapse" aria-labelledby="headingOne"27
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">28
<div class="card-body" style="font-size:20px">29
Answer #1 ..............................30
</div>31
</div>32
</div> 33
<h5>34
<div class="collapse multi-collapse" >35
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne4" data-target="#collapseOne5"36
aria-expanded="true" aria-controls="collapseOne5" style="font-size:20px"> 37
Question #238
</button>39
</div>40
</h5>41
<div class="collapse multi-collapse">42
<div id="collapseOne5" class="collapse" aria-labelledby="headingOne"43
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">44
<div class="card-body" style="font-size:20px">45
Answer #2 ...............................46
</div>47
</div> 48
<h5>49
<div class="collapse multi-collapse" >50
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne6" data-target="#collapseOne7"51
aria-expanded="true" aria-controls="collapseOne7" style="font-size:20px"> 52
Question #353
</button>54
</div>55
</h5>56
<div class="collapse multi-collapse">57
<div id="collapseOne7" class="collapse" aria-labelledby="headingOne"58
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">59
<div class="card-body" style="font-size:20px">60
Answer #3 ........................61
</div>62
</div>63
</div>64
</div>65
</div>66
</div>xxxxxxxxxx1
.collapsing {2
position: relative;3
height: 0;4
overflow: hidden;5
-webkit-transition-property: height, visibility;6
transition-property: height, visibility;7
-webkit-transition-duration: .17s;8
transition-duration: .17s;9
-webkit-transition-timing-function: ease-in-out;10
transition-timing-function: ease-in-out;11
}12
13
.button1 {14
background-color: #ffffff; /* White */15
border: none;16
color: black;17
text-align: center;18
text-decoration: none;19
display: inline-block;20
font-size: 16px;21
margin: 4px 2px;22
padding: 1% 10%;23
cursor: pointer;24
margin: 0;25
position: absolute;26
top: 70%;27
left: 50%;28
-ms-transform: translate(-50%, -50%);29
transform: translate(-50%, -50%);30
}31
32
.center {33
margin: 0;34
position: static;35
top: 65%;36
left: 50%;37
-ms-transform: translate(-50%, -50%);38
transform: translate(-50%, -50%);39
}40
41
.text {42
align-content: center;43
padding: 10 10 10 10;44
45
}46
.card-header {47
background-color:#ffffff;48
}49
.btn {50
width:100%;51
height:150px;52
text-align: center;53
background-color: #3f516c;54
color: #ffffff;55
border-width: 0px;56
border: none;57
border-style: none;58
align-content: center;59
}60
61
.btn:visited {62
width:100%;63
height:150px;64
text-align: center;65
background-color: #3f516c;66
color: #ffffff;67
border-width: 0px;68
border: none;69
border-style: none;70
align-content: center;71
}72
73
.btn:focus {74
width:100%;75
height:150px;76
text-align: center;77
background-color: #3f516c;78
color: #ffffff;79
border-width: 0px;80
border: none;81
border-style: none;82
align-content: center;83
}84
85
.btn:hover {86
width:100%;87
height:150px;88
text-align: center;89
background-color: #3f516c;90
color: #ffffff;91
border-width: 0px;92
border: none;93
border-style: none;94
align-content: center;95
}96
97
.btn:active {98
width:100%;99
height:150px;100
text-align: center;101
background-color: #3f516c;102
color: #ffffff;103
border-width: 0px;104
border: none;105
border-style: none;106
align-content: center;107
}108
109
p:hover {110
111
opacity:1.0;112
box-shadow:none;113
114
}115
116
.btn1 {117
width:100%;118
height:80px;119
padding-top: 10px;120
padding-bottom: 100px121
padding-left: 20px122
padding-bottom: 15px;123
text-align: left;124
border-width: 0px;125
border-bottom: 1px solid black;126
text-decoration: none; 127
}128
129
130
.btn1, .btn1:hover, .btn1:active, .btn1:visited, .btn1:focus {131
text-decoration:none;132
}133
134
#collapseOne3 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}135
#collapseOne5 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}136
#collapseOne7 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}137
138
#collapseOne2 {139
position: relative;140
left: 10px;141
}142
#collapseOne4 {143
position: relative;144
left: 10px;145
}146
147
#collapseOne6 {148
position: relative;149
left: 10px;150
}151
152
.headingOne {153
height: auto;154
overflow: hidden;155
}156
157
158
xxxxxxxxxx1
$('#first-button, #collapseOne1').on('click', () => {2
const $els = $('.multi-collapse > div');3
$els.each(function() {4
if ($(this).hasClass('show')) $(this).removeClass('show');5
});6
}); Console errors: 0