How to create Vocations menu on website

[henkas]

Hi
so i saw a lot of tibia websites have menu like "Vocations" so it shows what vocation server has and what skills that vocation have and transformations so it look like this.
Paint skills.
Pretty much obv what i mean

And when you click one of them it shows something like this

1,2,3,4,5,6,7 is showing how transformations look like and that second table below is what skills that vocation has so its name of skills what level you need, what ki level and other shit you know what i'm sayin'
So how do i need to make menu like this?

 

[slaw]

You can do it in plain javascript. So no PHP is required.

I suppose you know how to make tables in HTML, if no then there are plenty tutorials on the internet.

What you want to do is - after clicking on a link (image with vocation) table should be shown and another one hidden (the old one).

You can achieve it by using this javascript code:

var link = document.getElementById('your-table-id');
link.style.display = 'none';

So you create a table for each of your vocations with "id" element. It should be hidden by default. You can use CSS for that - "display" attribute set to "none".

Here's an example how to show/hide element in javascript: Tryit Editor v3.5

You just need to modify it a little so one element will be hidden and another shown.

 

[henkas]

You can do it in plain javascript. So no PHP is required.

I suppose you know how to make tables in HTML, if no then there are plenty tutorials on the internet.

What you want to do is - after clicking on a link (image with vocation) table should be shown and another one hidden (the old one).

You can achieve it by using this javascript code:

var link = document.getElementById('your-table-id');
link.style.display = 'none';

So you create a table for each of your vocations with "id" element. It should be hidden by default. You can use CSS for that - "display" attribute set to "none".

Here's an example how to show/hide element in javascript: Tryit Editor v3.5

You just need to modify it a little so one element will be hidden and another shown.

So lets start with creating menu table, so it should be very simple i should go to templates\loleslav\menu and make something like this
<li><a href="<?php echo getLink('highscores/experience'); ?>">Level</a></li>
lets ignore that php part, so if i make something like this and then refresh website it should appear new table without functions am i right? But when i make something like this on my website new table doesnt appear but it should. I checked all my websites files and i found just two places where i might need to create new table but you can delete or add new tables website tables doesnt change at all. Yea i tried ctrl+f5. Or you meant to say make tables from scratch? So yea i stuck with the simplest think it's pretty shameful lul