Lúc xem mã nguồn 4r mình tìm thấy đoạn javascript ShowHideLayer trong forumotion, nó có tác dụng tương tự hàm toggle trong jQuery, tức là nếu đối tượng đang ẩn thì đoạn javascript này sẽ làm nó hiện và ngược lại.

ShowHideLayer là một javascript plugin, hoạt động khi có một sự kiện. Các bạn có thể xem danh sách các sự kiện ở đây: [You must be registered and logged in to see this link.] vì nó cũng hoạt động với jQuery nên bạn có thể dùng với sự kiện trong jQuery [You must be registered and logged in to see this link.]

ShowHideLayer có thể nhận giá trị bằng ID với 1 hoặc 2 đối tượng .

Dùng với 1 đối tượng:

Code:

    ShowHideLayer('ID đối tượng')

Dùng với 2 đối tượng:

Code:

    ShowHideLayer('ID đối tượng 1','ID đối tượng 2')

Lưu ý: ShowHideLayer chỉ làm hiện đối tượng đang ẩn với thuộc tính style="display:none" của phần tử chứ không hoạt động với CSS {display:none}
Chỉ nhận giá trị là ID của đối tượng.
Chỉ hoạt động trong forumotion, chính xác là khi có file {L_LANG}.js

Code:

   

...trong đây có cả một kho javascript plugin đấy >"<

Code ví dụ: [You must be registered and logged in to see this link.]

Code:

    #fmvi {
        background: none repeat scroll 0 0 green;
        border: 10px solid cyan;
        color: white;
        display: block;
        font-size: 20px;
        line-height: 25px;
        margin: 20px;
        padding: 20px;
        text-align: center;
    }
    #doituong {
        background: none repeat scroll 0 0 yellow;
        border: 10px solid red;
        color: blue;
        display: block;
        font-size: 20px;
        line-height: 25px;
        margin: 20px;
        padding: 20px;
        text-align: center;
    }
    #doituong1 {
        background: none repeat scroll 0 0 brown;
        border: 10px solid black;
        color: white;
        display: block;
        font-size: 20px;
        margin: 20px;
        padding: 20px;
        text-align: center;
    }
    #doituong2 {
        background: none repeat scroll 0 0 blue;
        border: 10px solid black;
        color: white;
        display: block;
        font-size: 20px;
        margin: 20px;
        padding: 20px;
        text-align: center;
    }
   

   

   

      onmouseover="ShowHideLayer('doituong')"
     

      onmouseout="ShowHideLayer('doituong')"
     

     

      [ Rê chuột vào đây ]
       

      id="doituong"
     

      onclick="ShowHideLayer('doituong1','doituong2')"
     

     

      [ Click chuột vào đây ]
       

      id="doituong1"
       

      id="doituong2"
   

---

Còn đây là cách mà Forumotion thường dùng: [You must be registered and logged in to see this link.]

• Một vùng chỉ có tiêu đề không có nội dung và được ẩn đi
  

Code:

[b][b]<div class="main" id="id-doi-tuong-an" style="display:none">
  <div class="main-head clearfix">
      <p class="h2">Tiêu đề</p>
      <p class="options"><a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');"><img src="http://www.pettracker.com/sites/all/themes/tagg/images/icon_expand.gif" alt="+" align="" border="0" /></a></p>
  </div>
</div>[/b][/b]

Một vùng với tiêu đề và nội dung được hiển thị

Code:

[b][b]<div class="main" id="id-doi-tuong-hien" style="display:''">
  <div class="main-head clearfix">
      <p class="h2">Tiêu đề</p>
      <p class="options"><a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');"><img src="http://www.pettracker.com/sites/all/themes/tagg/images/icon_collapse.gif" alt="-" align="" border="0" /></a></p>
  </div>
  <div class="main-content clearfix">
      Nội dung đặt ở đây
  </div>
</div>[/b][/b]

Code:

Cả hai vùng này đều dùng

Code:

[b][b]<a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');">Click</a>[/b][/b]

...để ẩn/hiện.
Trong
ví dụ trên vùng 1 đang ẩn, nên khi click vào sẽ hiện ra, còn vùng 2 thì
ngược lại. Tiêu đề 2 vùng được đặt giống nhau nên tạo hiệu ứng ẩn hiện
cho nội dung.