Jump to content

[Solved] Tabbed Table Help


english
 Share

Recommended Posts

Hey guys, I'm creating a new RPG and I would like to have a tabbed table at the top of the forum. If you look here you will see that I already have a space at the top where stuff is (titled Cbox & Newest Threads), I would like to replace it with a table similar or equal to something like the table in the attachment. It would be nice if someone could go in there and code it for me or walk me through how to do it myself or just something.  I'm not a very good at coding and I just don't want to mess anything up. Please help.

 

Thanks in advance!

screenshot.png

  • I read this! 2

Hey!

Link to comment
Share on other sites

@english I've put together a little simple code for you to play with, you'll need to edit the CSS to your preferences but this should be a good start for you. 🙂

CSS

/* The holder for tabs! */
#tabbar {
width: 100%;
padding: 0;
margin: 0;
background: grey;
}
/* The tab links! */
.tabitem {
display: inline-block;
padding: 10px 20px;
color: white;
text-transform: uppercase;
}
/* Tab contents! */
.tab {
background: white;
border: 1px solid rgba(0,0,0,0.3);
border-top: 0px;
padding: 10px;
}

 

HTML

<!-- START: TAB ITEMS BAR -->
<div id="tabbar">
   <div class="tabitem" onclick="tab('tab1')">Tab One</div>
   <div class="tabitem" onclick="tab('tab2')">Tab Two</div>
   <div class="tabitem" onclick="tab('tab3')">Tab Three</div>
   <div class="tabitem" onclick="tab('tab4')">Tab Four</div>
</div>
<!-- END: TAB ITEMS BAR -->
<!-- START: TAB CONTENTS -->
<div id="tab1" class="tab">
   1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui.
</div>
<div id="tab2" class="tab" style="display: none;">
   2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui.
</div>
<div id="tab3" class="tab" style="display: none;">
   3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui.
</div>
<div id="tab4" class="tab" style="display: none;">
   4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis magna, eu fringilla quam. Praesent feugiat tristique ornare. Nunc efficitur orci at quam commodo tincidunt. Duis cursus eros vel odio dictum, eget scelerisque felis rutrum. Nam ac sem eget quam eleifend hendrerit quis ut massa. Aenean maximus ante ut neque fringilla, ut iaculis est dapibus. Maecenas ut lorem maximus, imperdiet ex et, semper dui.
</div>
<!-- END: TAB CONTENTS -->


JavaScript (place this in your Ungrouped Templates --> headerinclude)

<script>
function tab(tabid) {
    var i;
    var x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(tabid).style.display = "block";  
}
</script>

 

wcc_aff_one.png.ee644d7c84e4471ab7231d79aa59872c.png freerphostaffbutton.png.2c941043f4d1bcb22ada2b22d3e60dfc.png myrpg-affiliate.png.5453a73021a9354b5b772ac4e15f7ef9.png

Link to comment
Share on other sites

Hey @english in case you missed it, we have a codex on the Initiative. There are already two tabbed codes for your use, one with javascript and one without. There's even a welcome box (and another!)

 

Be sure to check out the codex for any additional coding needs you might have!

 

As a further heads up, check out the updated version of Dreaming of a Killer. I've fixed an issue that you're having with the guest view

 

Please yell if you need any further help!

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.