Articles :: General

How to make expanding boxes


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
Tags: Web-Design  Guide  Html 
Headings
  1. demo
  2. Java Code = Important Part
  3. Java Code = Action Part
  4. Examples of ID uses
  5. ID exists already
  6. Blah DEMO Code Example
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



<script type="text/javascript">
    function 
showorhide(id) { 
        if (
document.getElementById(id).style.display == "none") {
            
document.getElementById(id).style.display "block";
        } else {
            
document.getElementById(id).style.display "none";
        }
    }
</script>

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


onclick
="showorhide('fred');"  Id that is labelled here will be used to fold.
<
br />
href="#" To use the same page to be opened or to search within a page for said id.

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


<a onclick="showorhide('fred');" href="#">+</a>
<
div id="fred"blah blah blah </div>

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.
<< User Guide To Wiz-And-A Systems Ramon Contemporay Artist and Painter >>
Rate
wizanda & One love Copy; Dont Take!
API: Toolkit Print PDF Bookmark | RSS | RDF | ATOM
The comments are owned by the poster. We aren't responsible for their content.

 Re: How to make expanding boxes

Posted: 2008/3/17 22:32  Updated: 2008/3/17 22:34

wizanda

Helper
Joined: 2004/3/26
From: Nottingham, UK
Posts: 1969

<em onclick="showorhide('freds');">+</em>
<
div id="freds"blah blah blah </div>


If you make that code with EM its best as you get no page flicker, it then can go on any words....buttons also work well


blah blah blah
 This site is Hosted by Servage.Net