<style> .toggle { height: auto; background: white; transition: all 0.2s ease; opacity: 1; overflow: hidden; } input[type=checkbox].hide-input:checked+.toggle { height: 0; opacity: 0; padding-top: 0; } input.hide-input { position: absolute; left: -999em; } label.toggle:link , label.toggle:hover{ text-align: center; display: inline-block; cursor:pointer; } </style> <label for="showHideText">แสดงข้อมูล</label> <input type="checkbox" id="showHideText" class="hide-input"> <div class="toggle"> <p> 1.“ความคิด” เกิดจาก “ความรู้” ที่หาได้จากการ “เรียนรู้” <br> 2.หยั่งรู้ หยังคิด ผลิกชีวิตไปในทางที่ดี <br> 3.คนไม่รู้ คือคนไม่ผิด แต่คนที่ไม่รู้จักเรียนรู้ คือคนที่พลาดโอกาสดีดี <br> 4.อย่าให้ใครตราหน้าว่า “โง่” เพราะคน “โง่” ย่อมฉลาดกว่าเมื่อได้เรียนรู้ </p> </div>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <style> .toggle { height: 0; background: white; transition: all 0.2s ease; opacity: 0; overflow: hidden; } input[type="checkbox"].hide-input:checked + .toggle { height: auto; opacity: 1; padding-top: 0; } input.hide-input { position: absolute; left: -999em; } label { cursor: pointer; } </style> </head> <body> <label for="showHideText"> แสดงข้อมูล <span id="toggle-icon"><i class="fa fa-plus"></i></span> </label> <input type="checkbox" id="showHideText" class="hide-input" onclick="myFunction()" /> <div class="toggle"> <p> 1.“ความคิด” เกิดจาก “ความรู้” ที่หาได้จากการ “เรียนรู้” <br /> 2.หยั่งรู้ หยังคิด ผลิกชีวิตไปในทางที่ดี <br /> 3.คนไม่รู้ คือคนไม่ผิด แต่คนที่ไม่รู้จักเรียนรู้ คือคนที่พลาดโอกาสดีดี <br /> 4.อย่าให้ใครตราหน้าว่า “โง่” เพราะคน “โง่” ย่อมฉลาดกว่าเมื่อได้เรียนรู้ </p> </div> <script> function myFunction() { var checkBox = document.getElementById("showHideText"); var ti = document.getElementById("toggle-icon"); if (checkBox.checked == true) { ti.innerHTML = '<i class="fa fa-minus"></i>'; } else { ti.innerHTML = '<i class="fa fa-plus"></i>'; } } </script> </body> </html>
$('#click_advance').click(function() { $('#display_advance').toggle('1000'); $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down"); });
.mybtn{ background:url(zzz)} .mybtn:hover{ background: url(xxx)}
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
