JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/bootstrap.3.0.min.css">
<script src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/js/bootstrap.3.0.min.js"></script>
<div class="scrollspy navbar">
        <nav class="nav">
            <ul>
            <li class="spy1"><a href="#">hide</a></li>
            <li><a href="#option1">Option 1</a></li>
            <li><a href="#option2">Option 2</a></li>
            <li><a href="#option3">Option 3</a></li>
            <li><a href="#option4">Option 4</a></li>
            <li><a href="#option5">Option 5</a></li>
            </ul>
        </nav>
</div>
     <div class="content1">
        <section id="option1">1</section>
        <section id="option2">2</section>
        <section id="option3">3</section>
        <section id="option4">4</section>
        <section id="option5">5</section>
    </div>
    <div class="content2 hidey">
        <section id="option6">6</section>
        <section id="option7">7</section>
        <section id="option8">8</section>
        <section id="option9">9</section>
        <section id="option10">10</section>
    </div>

CSS

.hidey {
    display:none;
}

.nav ul {
    padding:0;
    list-style:none;
}

.nav li {
    float: left;
}

.nav li a {
  padding:20px;
  text-transform:none;
}

.navbar {
    position: fixed;
}

.navbar2 {
    top: 80px;
}

.nav li.active a {
    background: #0000ff;
}

.content1 section, .content2 section {
    width: 100%;
    height: 600px;
    background: #00f0f0;
}

JavaScript

$("body").scrollspy({ target: ".scrollspy" });

function spy2() {
    $( ".spy2" ).click(function() {
      var spy1Menu = "<ul><li class='spy1'><a href='#'>hide</a></li><li><a href='#option1'>Option 1</a></li><li><a href='#option2'>Option 2</a></li><li><a href='#option'>Option 3</a></li><li><a href='#option4'>Option 4</a></li><li><a href='#option5'>Option 5</a></li></ul>";
      $(".nav").html(spy1Menu);
      $(".content2").hide();
      $(".content1").show();
      $("body").scrollspy('refresh');
      spy1();
  });
}

function spy1() {
$( ".spy1" ).click(function() {
    var spy2Menu = "<ul><li class='spy2'><a href='#1'>show</a></li><li><a href='#option6'>Option 6</a></li><li><a href='#option7'>Option 7</a></li><li><a href='#option8'>Option 8</a></li><li><a href='#option9'>Option 9</a></li><li><a href='#option10'>Option 10</a></li></ul>";
    $(".nav").html(spy2Menu);
    $(".content1").hide();
    $(".content2").show();
    $("body").scrollspy('refresh');
    spy2();
});
}



$( ".spy1" ).click(function() {
    var spy2Menu = "<ul><li class='spy2'><a href='#1'>show</a></li><li><a href='#option6'>Option 6</a></li><li><a href='#option7'>Option 7</a></li><li><a href='#option8'>Option 8</a></li><li><a href='#option9'>Option 9</a></li><li><a href='#option10'>Option 10</a></li></ul>";
    $(".nav").html(spy2Menu);
    $(".content1").hide();
    $(".content2").show();
    $("body").scrollspy('refresh');
    spy2();
});