คัดลอกโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>คำถามที่พบบ่อย</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=K2D:400,500|Open+Sans">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
background: #fff;
}
.accordion .card {
border-radius: 6px !important;
border: 1px solid #eceded !important;
margin-bottom: 5px;
}
.accordion .card .card-header {
background: #f9fafa;
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 0;
font-family: "K2D", sans-serif;
border-radius: 6px 6px 0 0;
border-bottom: none;
}
.accordion .card-header:hover {
background: #ecf0f0;
}
.accordion .card-header h2 span {
float: left;
margin-top: 10px;
}
.accordion .card-header .btn {
color: #3659a2;
font-size: 1.04rem;
width: 100%;
text-align: left;
position: relative;
top: -2px;
font-weight: 500;
}
.accordion .card-header i {
float: right;
font-size: 1.3rem;
font-weight: bold;
position: relative;
top: 5px;
}
.accordion .card-header .btn:hover {
color: #35589f;
}
.accordion .card-body {
color: #324353;
text-align: justify;
border-top: 1px solid #eceded;
}
.page-title {
text-align: center;
margin: 2rem 0;
font-family: "K2D", sans-serif;
position: relative;
}
.page-title::after {
content: "";
width: 100px;
position: absolute;
margin: 0 auto;
height: 4px;
border-radius: 1px;
background: #3659a2;
left: 0;
right: 0;
bottom: -15px;
}
</style>
<script>
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).siblings(".card-header").find(".btn i").html("remove");
$(this).prev(".card-header").addClass("highlight");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).parent().find(".card-header .btn i").html("remove");
}).on('hide.bs.collapse', function(){
$(this).parent().find(".card-header .btn i").html("add");
});
});
</script>
</head>
<body>
<div class="container-xl">
<div class="row">
<div class="col-lg-12">
<h1 class="page-title">ถาม & ตอบปัญหาในการทำเว็บแอปด้วย Google App Script</h1>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="clearfix mb-0">
<a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">ทำไมเปิดเว็บแอปแล้วหน้าจอเป็นสีขาว? <i class="material-icons">add</i></a>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">สาเหตเกิดจากการลงชื่อเข้าใช้ไว้พร้อมกันหลายบัญชี วิธีการแก้ปัญหา ให้ออกจากระบบทุกบัญชีก่อน แล้วค่อยลงชื่อเข้าใช้ใหม่.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">หากต้องการลบแถบสีเทาที่อยู่ด้านบนของเว็บแอป จะมีวิธีลบได้อย่างไร? <i class="material-icons">add</i></a>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">แถบสีเทาที่แสดงอยู่ด้านบนซ้ายมือของเว็บแอป เป็นเครดิตของ Google ไม่สามารถลบออกได้ แต่สามารถใช้วิธีการซ่อนไม่ให้แสดง โดยนำลิ้งค์ของเว็บแอปไปใส่ใน iframe แล้วค่อยเปิดเว็บแอปให้แสดงผลภายใน iframe นั้น.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">ทำไมเปิดเว็บแอปในสมาร์ทโฟนแล้วแสดงผลไม่เต็มจอ? <i class="material-icons">add</i></a>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">เกิดจากการใช้คำสั่งใน function doGet() ไม่สมบูรณ์ ต้องเพิ่มคำสั่ง addMetaTag('viewport', 'width=device-width, initial-scale=1') ด้วย.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h2 class="mb-0">
<a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">ทำไมใส่ลิ้งค์รูปภาพจาก Google Drive ในเว็บแอปแล้วไม่แสดงภาพในไอโฟน? <i class="material-icons">add</i></a>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">เป็นบั๊กของ Google ที่ยังไม่สามารถแสดงภาพในไอโฟนได้ ให้แก้ปัญหาโดยการอัปโหลดไฟล์ขึ้นเว็บที่รับฝากไฟล์ฟรี แล้วนำลิ้งค์มาใช้งานแทน.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
