JSFiddle - React, Tailwind, and code Playground

by bala2024

HTML

<div class="gap">
</div>
   <div class="about_content">
   
    <ul id="verticalNav">
        <li><a href="#section1">Section I</a></li>
        <li><a href="#section2">Section II</a></li>
        <li><a href="#section3" onclick="return false;">Section III</a></li>
           <li><a href="#section4">Section I</a></li>
        <li><a href="#section5">Section II</a></li>
        <li><a href="#section6">Section III</a></li>
    </ul>
    </ul>
    <div id="sections">
        <div class="section" id="section1">
            <h2>Section I</h2>
            <p>Some content specific to this section...</p>
        </div>
        <div class="section" id="section2">
            <h2>Section II</h2>
            
        </div>
        <div class="section" id="section3">
            <h2>Section III</h2>
           
        </div>
        
          <div class="section" id="section4">
            <h2>Section I</h2>
            <p>Some content specific to this section...</p>
        </div>
        <div class="section" id="section5">
            <h2>Section II</h2>
            
        </div>
        <div class="section" id="section6">
            <h2>Section III</h2>
           
        </div>
    </div>
    </div>

CSS

ul#verticalNav {
    float:left;
    clear:left;
    width:15%;
}
div#sections {
    float:right;
    clear:right;
    width:80%;
}
.section
{
	width:750px;
	height:100%;
	background-color:#CCC;
}
.about_content
{
	width:1170px;
	height:650px;
	margin:0 auto;
}
.gap
{
	width:1170px;
	height:200px;
	margin:0 auto;
}

JavaScript

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        $('ul#verticalNav li a').each(function() {
            $(this).click(function() {
                showSection( $(this).attr('href') );
            });
        });
        $('ul#verticalNav li:first-child a').click();
    }
});