1. Code HTML
Tìm kiếm trên Google với từ khoá “show/hide content by html code”, có một bài hướng dẫn đáng chú ý: SHOW/HIDE BOXES WITH PURE HTML [DETAILS ELEMENT]. Ở đây, họ dùng rất nhanh và đơn giản dòng lệnh <details> của HTML5.
Dòng code của mình như sau:
<details>
<summary>Xem giải thích</summary>
<br>with regard to: về mặt, về cái gì
<br>in the context of: trong hoàn cảnh, trong bối cảnh
<br>in consideration of: đánh đổi với cái gì
<br>with a concern for: với lo ngại về cái gì
</details>
1. Closure of schools took place ______ falling numbers of students.
A. with regard to B. in the context of C. in consideration of D. with a concern for
Xem giải thích
with regard to: về mặt, về cái gì
in the context of: trong hoàn cảnh, trong bối cảnh
in consideration of: đánh đổi với cái gì
with a concern for: với lo ngại về cái gì
Ở đây, để xuống dòng trong phần giải thích, bạn sẽ cần thêm dòng lệnh <br> trước mỗi câu như ở hình dưới. Mình không dùng <p> </p> vì chúng tương đương với Enter, cách dòng khá là xấu nếu các dòng chỉ ngắn xíu. Shift+Enter ở <br> là hợp lí hơn và cũng giống như các post cũ của mình.
Chốt: 9/10. Tiện dụng, dễ dùng, tuy nhiên sẽ mất công copy và chỉnh sửa thủ công khá nhiều. Muốn thành một cái nút đẹp như hình dưới thì cũng phải biết qua qua về style CSS cho HTML nên dùng bình thường sẽ chỉ có dòng chữ Show/Hide thôi.
1. Closure of schools took place ______ falling numbers of students.
A. with regard to
B. in the context of
C. in consideration of
D. with a concern for
Xem đáp án
with regard to: về mặt, về cái gì
in the context of: trong hoàn cảnh, trong bối cảnh
in consideration of: đánh đổi với cái gì
with a concern for: với lo ngại về cái gì
2. Code HTML với Javascript
Dưới đây, mình sẽ làm theo một hướng dẫn có tên How TO – Toggle Hide and Show từ W3School. Tuy nhiên, dù đã làm theo đúng hướng dẫn 2 bước rồi nhưng nó vẫn lạ lắm :v Như bạn có thể thấy, đoạn code này sẽ luôn hiện ra đáp án trước, trong khi mục đích của mình lại là giấu đáp án đi. Như vậy, 1 option tốt hơn sẽ là khi mình muốn tách biệt phần câu hỏi và phân tích.
1. Closure of schools took place ______ falling numbers of students.
A. with regard to B. in the context of C. in consideration of D. with a concern for
with regard to: về mặt, về cái gì
in the context of: trong hoàn cảnh, trong bối cảnh
in consideration of: đánh đổi với cái gì
with a concern for: với lo ngại về cái gì
Lưu ý là ở bước 2, sau khi đã copy Javascript vô, bạn sẽ phải bổ sung <script> ở đầu và </script> ở cuối đoạn Java để chúng có thể chạy được nhé. Chốt lại, 5/10, lằng nhằng hơn mà cũng không trúng mục tiêu của mình.
3. Plugin WP-ShowHide
Với Plugin, thường sẽ rất tiện vì mình sẽ không cần mất công code nhiều, chỉnh sửa nhiều, mà chỉ cần dùng shortcode là xong. Tuy nhiên, nhược điểm của chúng theo mình biết là khá nặng cho cả hosting và dễ làm chậm tốc độ load web. Vì thế chỉ khi có cái nào thực sự oke thì mình sẽ dùng, không thì sẽ tiếp tục HTML cho nhẹ.
Shortcode bạn sẽ sử dụng trong Plugin này là [showhide type=”pressrelease”]Press Release goes in here.[/showhide]. Bạn thay tên ở “pressrelease” và Press Release goes in here.
Một điểm hay nữa là bên WPBeginner họ có làm cả 1 video hướng dẫn dùng WP-ShowHide ở link này, nên sẽ dễ cho những bạn không chuyên về kĩ thuật lần mò theo và thành công hơn.
Nhìn chung, rất dễ dùng, tuy nhiên khó tuỳ biến theo ý thích ở các chữ Show/Hide. Cái này bạn nào biết HTML để chỉnh vào cái code của Plugin sẽ hợp hơn.
4. Plugin Show-Hide/Collapse-Expand
Điểm yếu rõ rệt nhất: Bạn phải dùng Classic Editor thì mới có nút như nhà phát triển có trình bày. Bạn nào dùng Gutenbergh thì phải dùng shortcode.
1. Closure of schools took place ______ falling numbers of students.
A. with regard to
B. in the context of
C. in consideration of
D. with a concern for
[bg_collapse view=”button-orange” color=”#72777c” icon=”arrow” expand_text=”Show More” collapse_text=”Show Less” ]
with regard to: về mặt, về cái gì
in the context of: trong hoàn cảnh, trong bối cảnh
in consideration of: đánh đổi với cái gì
with a concern for: với lo ngại về cái gì
[/bg_collapse]
Tuy nhiên, Plugin lại có một điểm siêu mạnh đã có sẵn CSS cho nút, nên nhìn xinh và nổi bật hơn so với các phương pháp trên. Như vậy, mình sẽ giữ Plugin này cho đến khi có thêm Plugin khác tối ưu hơn.
