magical_poptarts's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

Tabs in Blogs

Tabs are useful to break up text in a blog, or segregate different topics. The code below contains some hastily put-together code for tabs (example), which is slightly modified from Nole's Tabular Code Snippet for Profile Pages. For some reason, the HTML within Nole's code snippet isnt fully supported by blogs. Feel free to use this as you please! If you do, please friend me or comment below, that would mean a lot! 


Have a good day! :)


<p>write stuff<br><br>
 <a href="#about">Introduction</a> | <a href="#interests">Nerd Shit</a> | <a href="#music">Spiritual Babble</a> | <a href="#meet">Gaming</a></p>
<!-- Wrapper for whole element -->

    <!-- Links/buttons that switch which panel is targeted -->
    <a class="panel-button" style="display:none" href="#about">Introduction</a>
    <a class="panel-button" style="display:none" href="#interests">Nerd Shit</a>
    <a class="panel-button" style="display:none" href="#music">Spiritual Background</a>
    <a class="panel-button" style="display:none" href="#meet">Gaming</a>

    <!-- This the panel that is displayed -->
    <div class="panel" id="about" style="display: none">
      <div class="panel-border">
<p>Always write within the panel-border class.</p>
        
</div>
    </div>
    <div class="panel" id="interests" style="display: none">
      <div class="panel-border">
<p>Writing the shit</p>
        
      </div>
    </div>
    <div class="panel" id="music" style="display: none">
      <div class="panel-border">

<p>Write stuff here. Wow!</p>
</div>
    </div>
    <div class="panel" id="meet" style="display: none">
      <div class="panel-border">
  
       <p>You can add as many h-refs as you want.</p>
      </div>
    </div>


<style>
    /*========Panel Styles==========*/
    .panel:target {
        display: block !important;
    }
    /* move button down so that it is still visible when
        page navigates to new target */
    .panel-button {
        position: relative;
        top: 45px;
        margin-top: -40px;
    }
    /* Push content down to adjust for button position */
    .panel {
        margin-top: 5px;
        padding-top: 50px;
    }
</style>




8 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

Donald

Donald's profile picture

Someday I’m going to use this! Way cool :)


Report Comment

Kaikaikilljoy

Kaikaikilljoy's profile picture

I was just whining that I didn't know how to do this. You are AMAZING thank you!


Report Comment



you're welcome! Have fun :)

by magical_poptarts; ; Report

How can you set the font color? The text within the tabs are all black, and my background is black, so I cant see anything.

by jPod Nano; ; Report