collapsible+division

Put click to open sections on your pages: Here's one that will really impress your students. You can hide portions of your page and make them viewable by clicking, then disappear by clicking again. (If you want to put more than one of these codes on the same page, read the notes at the end of this page first.) Try the example below.

media type="custom" key="4411429"

This is the full code: code  //<![CDATA[ function toggleDiv(divid){ if(document.getElementById(divid).style.display == 'none'){ document.getElementById(divid).style.display = 'block'; }else{ document.getElementById(divid).style.display = 'none'; } } //]]> Click here to view my notes These are my notes.

I can hide anything here.

code 1. Copy the code above and insert it into the 'embed widget' 'other html' box. 2. This is the only part you need to edit. You will find it 2/3 of the way down the code. code Click here to view my notes These are my notes.

I can hide anything here. code Where it says 'click to view my notes' is where you will put in the text you want to be visible on the page. Just substitute your text for mine. 3. Then where it says 'These are my notes.' and 'I can hide anything here.' is where you will change to your own words. If you only want one line (or paragraph) just delete from the onwards. ( means create a new line). If you want more lines, just add them. 4. h3 indicates the size of the text. If you remove it the text will be normal size. If you change it to h2 or h1 the text will be bigger.

Put click to open links on your pages: You can turn text into links with a few changes to the basic code. Try the example below.

media type="custom" key="4411499"

1. Copy the code as above and insert it into the 'embed widget' 'other html' box. 2. The part you need to edit is the last part of the code as below. code Click here to view my notes These are my notes.

I can hide anything here.

code 3. Delete from as shown below. code Click here to view my notes

code 4. Insert the following script into the space. code 

Cool Tools for Schools

Talk Like a Pirate</a>

code 5. Now change my words for yours. Where I have written 'Click here to view my notes' - write your own words. This is the comment link that stays visible on the page. 6. Where I have written the url (cooltoolsforschools.wikispaces.com), write the url you want to go to. Where I have written 'Cool Tools for Schools' write the text you want the reader to click on. 7. Now repeat this with as many links as you want. Remember to put a line break between them, insert

Now that you have the basic idea, using the this process you can hide anything at all on your pages. Here are some examples.

<span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Put click to open iframes on your pages: Embed an iframe that appears when you click the link on the page. Try this example.

media type="custom" key="4411659"

1. Taking your basic script delete the part as discussed in #2 above, so that the last bit of your code looks like this. code Click here to view my notes</a>

code 2. Now change my words for yours. Where I have written 'Click here to view my notes' - write your own words. This is the comment link that stays visible on the page. 2. Now add this to the space. code <span style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; border-collapse: collapse; font-family: 'Lucida Grande'; font-size: 11px; line-height: normal; white-space: pre-wrap;">

<iframe src="http://www.lenva.weebly.com" frameborder="1" scrolling="auto" width="100%" height="600">

code 3. Change the url (www.lenva.weebly.com) to you own url.

<span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Put click to open images from your wiki:

Example: media type="custom" key="4411737"

1. Repeat the steps as above. The part you are going to insert will be code <span style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; border-collapse: collapse; font-family: 'Lucida Grande'; font-size: 11px; line-height: normal; white-space: pre-wrap;">

<img src="http://gettingtrickywithwikis.wikispaces.com/space/showimage/bbi.png" />

code and the part you are going to change is the address of the image. You will need to substitute your url for mine code http://gettingtrickywithwikis.wikispaces.com/space/showimage/bbi.png

code making sure you keep the /space/showimage/ inside the url - in other words just change the wiki name and the image name.

<span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Put click to open images from the web:

Example: media type="custom" key="4411689"

Use the same process as above but the url you use will be one directly from the internet. If you go to the image on the internet (through Google image search or similar) just copy and paste the url (take out mine first).

<span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Put click to open embedded files:

Anything that can be embedded can be also used in the click to open script. Here is an example with embedded video: media type="custom" key="4411761"

Put the embed code directly into the space we have created (as above). code Click here to view my notes</a>

code Remember to change the text links to your own words.

**IMPORTANT NOTES:** <span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Putting more than one click to open file on the same page:

If you want to put more than one script on a page, you will have to give each script a unique name. This is very easy to do. The part of the script you need is these lines below. code /script>Click here to view my notes</a> code The name of the particular script is 'mydiv' If you paste another script with this name, it will not work, but it will operate the first script (because it is looking for the script by that name). You need to rename the script for each one you use on the same page.

I just use numbers to do this ... name my second script 'mydiv2' and my third script 'mydiv3' and so on. Thus I can put as many scripts as I like on a page. The lines for my second script would look like this code /script>Click here to view my notes</a> code NOTE: There are 2 places in the script that the name has to be changed.

Here is an example of more than one script on a page.