Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ปุ่ม checkbox ซ่อนแสดงข้อความและให้มีไอคอนแสดงตามสถานะคลิกเมาส์



 

ปุ่ม checkbox ซ่อนแสดงข้อความและให้มีไอคอนแสดงตามสถานะคลิกเมาส์

 



Topic : 136939



โพสกระทู้ ( 230 )
บทความ ( 0 )



สถานะออฟไลน์




เรียน พี่ ๆ ทุกท่าน
ขอรบกวนสอบถามครับ

จากโค๊ด
---------------------------
Code (PHP)
<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>

------------------------------------
showHideText

จากโค๊ดข้างต้น :
อยากเพิ่มรูปไอคอน + หลังหัวเรื่องเมื่อแสดงข้อความ
และไอคอน - เมื่อข้อความถูกซ่อน
(เหมือนบางเว็บที่ใช้คำว่าแสดงข้อมูลให้น้อยลง หรือซ่อนข้อมูล ก็จะมีเครื่องหมายลูกศรชี้บนและชี้ล่าง)
นั่งหาตัวอย่างโค๊ดในเว็บมาหลายวัน ก็ไม่มีแบบไอคอนครับ ขอบคุณมากครับ



Tag : PHP, CSS, HTML5, JavaScript








ประวัติการแก้ไข
2023-02-02 13:03:24
2023-02-02 13:04:54
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2023-02-02 12:13:36 By : pukmtec View : 849 Reply : 6
 

 

No. 1



โพสกระทู้ ( 1,994 )
บทความ ( 10 )



สถานะออฟไลน์
Facebook Blogger

จะประมาณนี้ครับ

https://www.w3schools.com/jquery/jquery_hide_show.asp


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-02 14:07:53 By : {Cyberman}
 


 

No. 2



โพสกระทู้ ( 230 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณ พี่ To Be Developer ครับ

จากโค๊ดของผมข้างต้นก็สามารถ Show Hide ข้อความได้ครับ
แต่อยากเพิ่มปุ่มไอคอน + หรือ - เข้าไปครับ
ก็ไม่รู้ว่าจะเพิ่มตรงไหน เพิ่ม Script อะไรเข้าไปให้แสดง ไอคอน + และ - ครับ
ขอบคุณมากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-02 17:01:41 By : pukmtec
 

 
ตอบความคิดเห็นที่ : 2 เขียนโดย : pukmtec เมื่อวันที่ 2023-02-02 17:01:41
รายละเอียดของการตอบ ::
คุณใช้ CSS ในการ show/hide มันบังคับ element โดยตรงไม่ได้
เม้นต์บนแนะให้ไปใช้ JS/jQuery เพื่ออ้างอิงและกำหนดหรือแทรก content ได้


CSS ให้สลับเอา ผมยังคงการ show/hide ไว้
และไม่ได้ปัดกวาดอย่างอื่นนอกจาก style สุดท้ายซึ่งไม่มีประโยชน์
เนื่องจากอ้างอิง (selector) ไม่ถูกต้อง

แบบ pure JS + font awesome
<!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>



แนะนำให้ศึกษาพื้นฐาน HTML+CSS+JS ให้เข้าใจเพื่อความสบายในครั้งต่อไป
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-02 17:18:46 By : 009
 


 

No. 4



โพสกระทู้ ( 230 )
บทความ ( 0 )



สถานะออฟไลน์


ขอขอบคุณมาก ๆ ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-03 10:32:24 By : pukmtec
 


 

No. 5



โพสกระทู้ ( 1,994 )
บทความ ( 10 )



สถานะออฟไลน์
Facebook Blogger

ใช้ toggle ของ jquery ช่วยครับ

https://stackoverflow.com/questions/15345784/change-icon-on-click-toggle

Code (JavaScript)
$('#click_advance').click(function() {
    $('#display_advance').toggle('1000');
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-03 11:34:46 By : {Cyberman}
 


 

No. 6



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


เมื่อก่อน ใช้ปุ่มที่เป็นรูปภาพ
Code
.mybtn{ background:url(zzz)}
.mybtn:hover{ background: url(xxx)}


ถ้าอยากเปลี่ยน font-awesome ก็ต้องทำความเข้ามใจ กับ font-awesome ก่อนว่าเขาใช้อะไร ยังไง
เปิด browser เลือก inspect ดู css ที่เกี่ยวข้อง reformat เพื่อแปลงเป็น code แยกส่วน แล้วหาชื่อคลาสที่ต้องการ
ดูความแตกต่าง ละหว่าง 2 คลาส แล้วนำไปเพิ่มเติมแก้ไข ตามต้องการ
css change font-awesome
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-02-03 15:14:26 By : Chaidhanan
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ปุ่ม checkbox ซ่อนแสดงข้อความและให้มีไอคอนแสดงตามสถานะคลิกเมาส์
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่