This is a very basic template for a cottage with 5 rooms, where the links to ALL rooms will always appear across the top like so:

Page 1 | Page 2 | Page 3 | Page 4 | Page 5

There is no fancy formatting.

To use, copy the text below into an editor and change the room contents. You can also change the Page 1, Page 2 in the top section to have different names (Books I Like, Movies I Like, etc)

------------------------------------------

<a href="#" onclick="toggleBlock('1', true); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false)">Page 1</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', true); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false)">Page 2</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', true); toggleBlock('4', false); toggleBlock('5', false)">Page 3</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', true); toggleBlock('5', false)">Page 4</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', true)">Page 5</a>



<div id="1" style="display: ;"><br />
<!-- add page 1 contents here (these will be seen by default when visiting your cottage) -->

This is the first page of my cottage

</div>

<div id="2" style="display: none;"><br />
<!-- add page 2 contents here (these will only be seen when clicking Page 2 in the links at the top) -->

This is the second page of my cottage

</div>

<div id="3" style="display: none;"><br />
<!-- add page 3 contents here (these will only be seen when clicking Page 3 in the links at the top) -->

This is the third page of my cottage

</div>

<div id="4" style="display: none;"><br />
<!-- add page 4 contents here (these will only be seen when clicking Page 4 in the links at the top) -->

This is the fourth page of my cottage

</div>

<div id="5" style="display: none;"><br />
<!-- add page 5 contents here (these will only be seen when clicking Page 5 in the links at the top) -->

This is the fifth page of my cottage
</div>

--------------------------------------------

And that's the end of your 5-room cottage. Now, I am going to place the same code again, but I'm going to add a sixth room. Everything here (in red) is added - nothing in the above has been changed or removed. This should make it easy for you to do the same should you want a 7th or 8th room or even more.

------------------------------------------

<a href="#" onclick="toggleBlock('1', true); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false); toggleBlock('6', false)">Page 1</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', true); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false); toggleBlock('6', false)">Page 2</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', true); toggleBlock('4', false); toggleBlock('5', false); toggleBlock('6', false)">Page 3</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', true); toggleBlock('5', false); toggleBlock('6', false)">Page 4</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', true); toggleBlock('6', false)">Page 5</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false); toggleBlock('6', true)">Page 6</a>




<div id="1" style="display: ;"><br />
<!-- add page 1 contents below (these will be seen by default when visiting your cottage) -->

This is the first page of my cottage

</div>

<div id="2" style="display: none;"><br />
<!-- add page 2 contents below (these will only be seen when clicking Page 2 in the links at the top) -->

This is the second page of my cottage

</div>

<div id="3" style="display: none;"><br />
<!-- add page 3 contents below (these will only be seen when clicking Page 3 in the links at the top) -->

This is the third page of my cottage

</div>

<div id="4" style="display: none;"><br />
<!-- add page 4 contents below (these will only be seen when clicking Page 4 in the links at the top) -->

This is the fourth page of my cottage

</div>

<div id="5" style="display: none;"><br />
<!-- add page 5 contents below (these will only be seen when clicking Page 5 in the links at the top) -->

This is the fifth page of my cottage
</div>

<div id="6" style="display: none;"><br />
<!-- add page 6 contents below (these will only be seen when clicking Page 6 in the links at the top) -->

This is the sixth page of my cottage
</div>

Thx, Shaz this time I saved it to a file in my computer

You are so awsome for giving your hard time for us ty so much wish I could pay you... Means alot

you've figured it out, but if anyone else is wondering the same question, look for the words "Page 1", "Page 2", etc, in the top block of code. You can put whatever you want in there and that's what will show as the link.

Victor, I'm just glad it's something you can use. Let me know if you want to expand it and are having troubles.

I am far at my cottage because my account is not remembered by this , and I am back to the very start .

Thanks so much Shaz, it will be very helfull to create a nice cottage I hope I'll manage ....

The links won't work!!! The page won't load

Thanks shaz, I have no clue how to start a cottage so this is a great help to get me started. Very nice and thoughtful of you. =].

Remember that anything between <!-- and --> is actually a comment, so putting your code between those will have no effect on your cottage. You need to put your cottage contents in the spots where I've said "This is the first page...."


I have added an example, in the first post, of what to do to create a sixth room. Rather than explaining it, I've done it, highlighting the parts that I added. Hopefully this will make it easy for anyone who wants more rooms in their cottages. Just don't forget to add the extra semi-colons ; before the toggleBlocks in the links.

It worked but then you already knew that. This coding stuff is very interesting. If someone would be willing to teach me these things (basics) would love to learn. They could be implemented into my mothers computer for the bakery.It would help me help my parents.

Ty kat,

well i saw the scripts but ii still didnt understand how to use those!!!!
can any 1 help me here?

what scripts? Have you tried to use the code (you can just copy it and paste the whole lot into your cottage - see what words appear on each page, then you know where you need to change it)?

Perhaps a bit more of an explanation of what you're having trouble with would help.

Thanks. This will come in handy.

This is a good post Shaz, and much easier than trying to PM the info.

A 5 room code for those who doesn't know where things should go:

<a href="#" onclick="toggleBlock('1', true); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false)">Insert your page 1 title here</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', true); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', false)">Insert your page 2 title here</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', true); toggleBlock('4', false); toggleBlock('5', false)">Insert your page 3 title here</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', true); toggleBlock('5', false)">Insert your page 4 title here</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', false); toggleBlock('4', false); toggleBlock('5', true)">Insert your page 5 title here</a>

<div id="1" style="display: ;"><br />Insert your page 1 content here</div>
<div id="2" style="display: none;"><br />Insert your page 2 content here</div>
<div id="3" style="display: none;"><br />Insert your page 3 content here</div>
<div id="4" style="display: none;"><br />Insert your page 4 content here</div>
<div id="5" style="display: none;"><br />Insert your page 5 content here</div>

nice. Mine was a little misleading. I think people sometimes added content where the comments were - understandably looking back at it.

this was a little confusing at first (the code at the top) but i finally figured it out over....some time ago, ty shaz, it made a great deal of improvement on my cottage! ^^

What if you only want 2-3rooms?

Do you use this,or something else?

@iyaemma~ u still use this but if u just want 2-3 pg code ill give u this in a revised version, here~

<a href="#" onclick="toggleBlock('1', true); toggleBlock('2', false); toggleBlock('3', false)">Page 1</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', true); toggleBlock('3', false)">Page 2</a> | <a href="#" onclick="toggleBlock('1', false); toggleBlock('2', false); toggleBlock('3', true)">Page 3</a>

<div id="1" style="display: ;"><br />
<!-- add page 1 contents here (these will be seen by default when visiting your cottage) -->

((place everything for pg 1 in place of this))

</div><div id="2" style="display: none;"><br />
<!-- add page 2 contents here (these will only be seen when clicking Page 2 in the links at the top) -->

((place everything for pg 2 in place of this))

</div><div id="3" style="display: none;"><br />
<!-- add page 3 contents here (these will only be seen when clicking Page 3 in the links at the top) -->

((place everything for pg 3 in place of this))
</div>


-------------

there ya go but that is for a 3 pg cottage

@aisling, I am interested in how you made the bold part of your code? I always look for your version of codes because it is so easy to see what to do, but how do you imbed a code into a code?