jquery- Click ẩn hiện một đối tượng

 Để làm ẩn/hiện một đối tượng, về thao tác chúng ta có 2 cách:
- Một là hover vào layer0 sẽ xuất hiện layer1: Với cách này chúng ta dùng CSS

.layer0 {position:relative}
.layer0 .layer1 {position:absolute; display:none}
.layer0:hover .layer1{display:block;}

- Click vào layer0 sẽ làm ẩn/hiện layer1
Tuy nhiên CSS hiện nay không có thuộc tính :click tương tự như :hover Vậy nên ta đành dùng javascript để sử dụng click
Code dưới đây sử dụng jquery làm ẩn/hiện một đối tượng nào đó, nó thường được ứng dụng làm menu click hoặc sử dụng trong bài viết cho gọn tương tự như <details> trong HTML. Hay có têể ứng dụng làm Tab.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.js'></script>
<script>
jQuery(document).ready(function() {
jQuery("#layer0").click(function(){
jQuery("#layer1").slideToggle("slow");
jQuery(this).toggleClass("active"); return true;
});
});
</script>
<style>
  #layer0 {position:relative;}
  #layer1 {position:absolute; display:none; background:#eee;padding:10px}
</style>
<div id="layer0">  Bạn click vào đây
  <div id="layer1">Nội dung này được ẩn/hiện, nếu bạn không dùng css hoặc không dùng thuộc tính position:absolute thì mỗi lần hiện nó sẽ ảnh chèn vào vị trí xung quan tương tự như thẻ &lt;delails&gt; trong HTML5<br/>Còn nếu có position:absolute thì sự xuất hiện của nó không ảnh hưởng đến các đối tượng khác trong trang</div>
</div>

DEMO: Bạn click vào đây

Nội dung này được ẩn/hiện, nếu bạn không dùng css hoặc không dùng thuộc tính position:absolute thì mỗi lần hiện nó sẽ ảnh chèn vào vị trí xung quan tương tự như thẻ <delails> trong HTML5
Còn nếu có position:absolute thì sự xuất hiện của nó không ảnh hưởng đến các đối tượng khác trong trang

Bài đăng này còn một lỗi bất cập, mĩnh sẽ khắc phục sau

http://web.bendoi.vn/2013/07/jquery-click-an-hien-mot-doi-tuong.html