Hello! So basically, I'm still a bit of a coding newbie, and have been trying to figure out how to create layouts with clickable tabs. And I'm just not grasping it. I've managed to create a little area with clickable link that jumps to the proper area, but the problem is that it just jumps without hiding information from the previous page.
My test subject for example here When I click the pet link, I only want the words in gray to be show. Likewise for the red area when I click the art link. Ideally I'd like to create a shared content area with tabs that show different text when they're clicked.
Hope that makes sense o.o Example pet code, if it helps.
SPOILER (click to toggle)
<style>.pet_age_info_date, .pet_wco_info_date, h2,, h2 {display:none;}
, , -ban, -ban-main, .hustler, , -lrc, -rrc {display:none;}
, -right, , , , h2, a, {display:none;}
, , , , {background-color:transparent;}
,,{display:none;}
{
height: 800px;
Width: 900px;
background-color: ;
}
{ height: 20px; width:900px; background: ; }
{ height: 20px; width: 900px; background: ; overflow:auto;} {background:;overflow:hidden;} {background:;overflow:hidden;} </style>
i'm not particularly good with divs so hopefully someone can point us both to a more current resource or maybe a w3schools guide or something, but in the meantime perhaps this old thread can help you. the post itself is broken (i think it might be too long), but if you quote it, you can copy-paste it into a word program. (of course, then you have to edit out all the scode, but the guide itself is still intact. if you broke it into sections, you could paste it into a pet profile and copy it from there, i guess?) i used the section on anchor links when i was writing widowmaker's profile, though i haven't been patient enough to do tabs so she's got links in the text instead.
try something like this
<style>
{
height: 800px;
Width: 900px;
background-color: ;
}
{ height: 20px; width:900px; background: ; }
{ height: 100px; width: 900px; background: ; overflow:hidden; }
, { height: 100px; width: 900px; display: block; overflow-y: auto; }
{background:;} {background:;}</style>
i used that guide's outline, more or less. i also renamed content because that's taken by the regular pet page code -- and pet and art, but only because those are ping groups p; -- and i put your pet and art sections inside the content section