Register Arama Bugünkü Mesajlar Mark Forums Read

Reply
 
Thread Tools
[HOW TO - vB4] Making Boxes Collapsible
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 4 Makaleleri, yazar vB.Org Poster 10 Jul 2018, 10:10

Start:

OK, here's a small guide how to make a boxes/layers collapsible. Let's say, you have a simple div-container you want to make collapsible. The css ids and classes assigned to the elements are completely arbitrary.


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.




Step 1: Adding "collapse"-class to surrounding container



Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

The next line in the example establishes the container's header, in this case by means of a level 2 heading. This header will not be collapsed with the rest of the box but remain visible. This line can be left untouched.


Step 2: Adding id to what we want to hide

As a second step we have to add an unique id to the element that contains what we want to dissapear. Note: This element can be almost any html-tag that can be hidden (div, ul, ol, p, a - you get the idea). Note also: The element has to have an id that needs to be unique not only on the page, but on the whole site. So make sure you use some unique prefix, suffix or something like that (marked in blue).


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.




Step 3: Adding collapse-button

Inside the header add the code for the collapse-button. You'll have to adapt it according to the id you assigned in step 2 (adaptions needed marked in blue). Make sure the part you add inside the image name variable is not the exact same as the id you added to the container that you want to hide. If you add the exact same, the button will vanish under certain circumstances, too:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.




Result:

In the end, the code will look like that:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.




Collapsed as default? Yes, but...

There is a way default the box to be collapsed by default. But this it's quick and dirty, and really not recommended to use. Basically, you have to add display:none to the style of the collapsing container, like so:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

Now, there are two major drawbacks:
  • any user with javascript disabled will not be able to open the box, and the box will show the wrong icon.
  • vB at this point only saves information on closed boxes to a cookie; so if you reload the page, the box will always be closed, because vB will not remember that it has been opened.


Collapse more than one box at a time? Yes, but...

Now, functionally this is perfectly possible - just use the same id for every element you want to collapse together. But beware: for valid code you can't use duplicate ids on a page. So if you do that, your code will break xhtml validation!

I hope this will be useful for some of you!
-c

Please note that this article has been written first for alpha 1 version and been updated for beta 3. There still may be changes until gold. For example the button used is clearly marked as beta (_40b in the file name).
Views: 16
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


New To Site? Need Help?

All times are GMT +3. The time now is 14:19.

Tasarım Özelliği | Genişlik: Geniş Renk: [HOW TO - vB4] Making Boxes Collapsible [HOW TO - vB4] Making Boxes Collapsible [HOW TO - vB4] Making Boxes Collapsible [HOW TO - vB4] Making Boxes Collapsible [HOW TO - vB4] Making Boxes Collapsible