เพิ่มส่วนที่ซ่อนในหน้าเว็บ collapsible

เล่าเรื่องโดย iEasyCom_Admin

 เพิ่มส่วนที่ซ่อนในหน้าเว็บ

ทำเว็บที่ซ่อนข้อความดังตัวอย่าง


1 เพิ่มโค้ดในส่วน style

<style>

.collapsible {

  background-color: red;

  color: white;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 20px;

}


.active, .collapsible:hover {

  background-color: yellow;

  color: black;

}


.collapsible:after {

  content: '\002B';

  color: white;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}


.active:after {

  content: "\2212";

}


.content {

  padding: 0 18px;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

  background-color: #fff4f4;

}

</style>

2. ใส่เนื้อหาในโค้ด และอย่าลืมใส่ script ไว้ท้ายบทความด้วย ดังตัวอย่าง 

<body>


<h2>เพิ่มส่วนที่ซ่อนในหน้าเว็บ ด้วย Class: .collapsible </h2>


<h3>ตัวอย่าง 1:</h3>

<button class="collapsible">ข้อความ</button>

<div class="content">

  <p>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.</p>

</div>


<h3>ตัวอย่าง 2:</h3>

<button class="collapsible">ตัวอย่าง 2:</button>

<div class="content">

  <p>ฝังไฟล์</p>

  <iframe src="https://drive.google.com/file/d/1HfFGPhUJRgYHrK-b7NNIfwXagaLJ42Ji/preview" width="640" height="480" allow="autoplay"></iframe>

</div>


<script>

var coll = document.getElementsByClassName("collapsible");

var i;


for (i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var content = this.nextElementSibling;

    if (content.style.maxHeight){

      content.style.maxHeight = null;

    } else {

      content.style.maxHeight = content.scrollHeight + "px";

    } 

  });

}

</script>


</body>