How to make expanding boxes

Category: General
Author: wizanda
Date: 2006/8/13
All over our site you will see a new feature of + added all over to fold up the site, this is done in Java and html so here is how to do it on anything with an id
Keywords: Web-Design,Guide,Html

Summary: All over our site you will see a new feature of + added all over to fold up the site, this is done in Java and html so here is how to do it on anything with an id

Here is a quick example of how to add folding up page items on any page that supports java and html together.


demo


+
blah blah blah vanishes





Java Code = Important Part








That is the Java Code this on our site; it was placed in the banner to begin and works in Xoops.


Yet can easily be added in the top of a theme in the head or html document.


yet in our case we wanted it on all our theme in one go, with no work on our part it is only after playing around adding it as banner.... We realized that the banner within Xoops is a top loader and loads before the rest of the page; so works on all items.


So just adding a blank banner with this code, can add to multiple themes in one go as we have.




Java Code = Action Part





Now the + Sign you see everywhere, this will make anything that is called by the same ID name, to open and close...


For instances...



Examples of ID uses







Plus many others, we have not included TR as it causes a second opening table section, when reloaded on opening
.

Each ID must be different and each time you want to make something collapse you can use Alink to make a + sign where needed any where in the page.


So as you see with what we have done, there is ++++ at the bottom of our pages and this is linked across the theme, so the theme folds.


The Blocks that have it, are included in the templates of the blocks and so on.


This could be made more into Xoops as a standard feature and may do when people notice we have done it.




ID exists already




If you already have ID used in a theme or anything really, just add the Alink part and then change the idname for the one being used. This should then make that item fold up.



Blah DEMO Code Example





Just to finish this is all the code added when the JAVA is in place and it makes what you see to begin with work.
Articles V1.01
URL: https://www.wizanda.com/modules/article/view.article.php/c1/133