เรียนรู้วิธีการสร้างหีบเพลง (collapsible content)
หีบเพลง
accordions มีประโยชน์เมื่อคุณต้องการที่จะสลับไปมาระหว่างการซ่อนและแสดงให้เห็นจำนวนมากของเนื้อหา:
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore นา aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคายูทาห์ aliquip อดีต EA commodo consequat
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore นา aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคายูทาห์ aliquip อดีต EA commodo consequat
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore นา aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคายูทาห์ aliquip อดีต EA commodo consequat
สร้างหีบเพลง
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>
<button class="accordion">Section
2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>ขั้นตอนที่ 2) เพิ่ม CSS:
สไตล์หีบเพลง:
ตัวอย่าง
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note:
hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
display: none;
}
/* The "show" class is added to the
accordion panel when the user clicks on one of the buttons. This
will show the panel content */
div.panel.show {
display: block !important;
}ขั้นตอนที่ 3) เพิ่ม JavaScript:
ตัวอย่าง
/* Toggle between adding and removing the
"active" and "show" classes when the user clicks on one of the
"Section"
buttons. The "active" class is used to add a background color to the
current button when its belonging panel is open. The "show" class is used to open the
specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick =
function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
} ลองตัวเอง» หีบเพลงเคลื่อนไหว
ทำให้เกิดการเปลี่ยนแปลงต่อไปนี้ใน panel และ show ชั้นเรียนที่จะทำให้การเคลื่อนไหวหีบเพลง
นี้จะทำให้สไลด์หีบเพลงลง (max-height) และจางหายไปใน (opacity) :
ตัวอย่าง
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition:
0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height:
500px; /* Whatever you like, as long as its more than the height of the
content (on all screen sizes) */
}
ลองตัวเอง» เพิ่มไอคอน
เพิ่มสัญลักษณ์ให้แต่ละปุ่มเพื่อบ่งชี้ว่าเนื้อหาที่พับเป็นเปิดหรือปิด:
ตัวอย่าง
button.accordion:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}
ลองตัวเอง»