Ẩn hiện thẻ Div với Jquery
Ẩn hiện thẻ Div bằng button với Jquery khá là hay. Trong hướng dẫn này tôi sẽ hướng dẫn bạn cách dùng chúng trong blogger.
Tham khảo Demo :
Các bước thực hiện :
Thêm Query vào trước </head> (nếu bạn đã có thì bỏ qua)
(Chú ý: Nếu bạn đã có Jquery.min.js thì không thêm cái đó nữa)
Nội dung bạn muốn ẩn, hiện bằng button (có thể là ảnh, thẻ div...)
Hãy đặt chúng trong :
Thêm button để mở nội dung ẩn (đặt bất cứ vị trí nào trong body) :
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Ẩn hiện thẻ Div bằng button với Jquery khá là hay. Trong hướng dẫn này tôi sẽ hướng dẫn bạn cách dùng chúng trong blogger.
Tham khảo Demo :
Các bước thực hiện :
Bước 1:
Thêm Query vào trước </head> (nếu bạn đã có thì bỏ qua)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderHead").click(function(){
$("#comment-editor").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
(Chú ý: Nếu bạn đã có Jquery.min.js thì không thêm cái đó nữa)
Bước 2 :
Nội dung bạn muốn ẩn, hiện bằng button (có thể là ảnh, thẻ div...)
Hãy đặt chúng trong :
<div id='comment-editor' style='display:none !important'>
Đặt nội dung bạn muốn ẩn hiện bằng div</div>
Bước 3 :
Thêm button để mở nội dung ẩn (đặt bất cứ vị trí nào trong body) :
<div id='expanderHead' style='cursor:pointer;'>
Button Expand <span id='expanderSign'>+</span>
</div>
OK. Vậy là đã xong.
(M.Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này)
Bạn có thể Download file HTML :
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét