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>

4 Kudos

Comments

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

Donald

1615148165

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

Report Comment