---
tags: javascript
---
bootstrap 3.7 FAQ連結
https://getbootstrap.com/docs/3.3/javascript/#collapse
bootstrap 4.6 FAQ連結
https://getbootstrap.com/docs/4.6/components/collapse/
## accordion
https://codepen.io/xqkldzlk-the-scripter/pen/yLZGOWK
``` html
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Packaging Industry</div>
<div class="accordion-content">
<div class="accordion-box">
<p>It has good tear resistance and durability, effectively protecting products from damage and environmental impact.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Construction</div>
<div class="accordion-content">
<div class="accordion-box">
<p>PP boards are used to make roofs, wall panels, partitions, and cladding. It is popular for its weather resistance and corrosion resistance.</p></div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Medical and Pharmaceutical</div>
<div class="accordion-content">
<p>PP boards can be used to make medical devices, laboratory equipment, and biomedical facilities.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Automotive</div>
<div class="accordion-content">
<div class="accordion-box">
<p>Its lightweight and durability make it an ideal choice for vehicle materials, so it is widely used in the manufacture of automotive interiors, cabins, protective covers, and vehicle exterior parts.</p>
</div>
</div>
</div>
</div>
```
``` css
/* 初始隱藏內容，並設置動畫效果 */
.accordion-content {
overflow: hidden;
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
line-height: 1.5;
max-height: 0;
font-size: 15px;
}
.accordion-item.active .accordion-content{
max-height: 100%; /* 使用百分比來允許內容自適應高度 */
}
.accordion-box{
padding: 10px 20px;
}
.seo-wrap{
clear:both;
font-size: 14px;
padding-bottom:30px;
line-height: 1.5;
}
.seo-wrap h2{
background-image: none;
padding:0;
margin:20px 0 10px;
font-size:15px;
font-weight: bold;
}
.accordion-header{
font-size: 14px;
padding:8px 25px;
font-weight: 500;
border-bottom:1px solid #eee;
position: relative;
cursor: pointer;
}
.accordion{
margin-top: 10px;
}
.accordion-header:before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #8fabaa transparent transparent transparent;
position: absolute;
left: 5px;
top:15px;
}
.accordion-item.active .accordion-header:before{
border-width: 0 5px 8px 5px;
border-color: transparent transparent #0f958e transparent;
}
```
``` javascriplt
// 獲取所有手風琴項目
const accordionItems = document.querySelectorAll('.accordion-item');
// 為每個項目添加點擊事件監聽器
accordionItems.forEach(item => {
const header = item.querySelector('.accordion-header');
const content = item.querySelector('.accordion-content');
header.addEventListener('click', () => {
const isActive = item.classList.contains('active');
accordionItems.forEach(otherItem => {
otherItem.classList.remove('active');
otherItem.querySelector('.accordion-content').style.maxHeight = 0;
});
if (!isActive) {
item.classList.add('active');
const contentHeight = content.scrollHeight + 'px';
content.style.maxHeight = contentHeight;
}
});
});
```
---
# FAQ bootstrap定位到標題
```javascript=
//頁籤收合定位
$(function() {
$('.panel-group .panel-title').on('click', function() {
var thisclick = $(this);
var thebody = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'),
thebodyscrollTop = thebody.scrollTop();
thebody.stop().animate({
scrollTop: thebodyscrollTop
}, {
duration: 500,
easing: 'linear',
step: function(now, fx) {
fx.end = thisclick.parents('.panel').offset().top - 10;
},
});
});
})
```
3.7
```html
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-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. 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.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-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. 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.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-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. 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.
</div>
</div>
</div>
</div>
```
這一段程式碼可以增加手風琴效果開合的時候,隨著時間調整目前螢幕的scroll top,請貼在script 的 $(document).ready(function () {});
```java
$('.panel-group .accordion-toggle').on('click',function(){
var thisclick = $(this);
var thebody = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'),
thebodyscrollTop = thebody.scrollTop();
thebody.stop().animate(
{
scrollTop: thebodyscrollTop
},
{
duration: 500,
easing:'linear',
step : function( now , fx) {
fx.end= thisclick.parents('.panel').offset().top - $('#header').outerHeight() - 15;
},
}
);
});
```
https://docs.google.com/document/d/1IOaWkyHpeiWpqmOkJsiCiQVFaRW_BVFBsLiJliI5ESo/edit
---
Sign in with Wallet
Connect another wallet