how to replace div content for button click on same page in bootstrap
<p>I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content...
code-</p>

<pre><code>&lt;div class="col-sm-3"&gt;
&lt;div class="btn-group-vertical" style="padding-top:12px;"&gt;
      &lt;button type="button" class="btn btn-warning" id="btn1"&gt;Btn1&lt;/button&gt;
      &lt;button type="button" class="btn btn-warning" id="btn2"&gt;Btn2&lt;/button&gt;
      &lt;button type="button" class="btn btn-warning" id="btn3"&gt;Btn3&lt;/button&gt;
      &lt;button type="button" class="btn btn-warning" id="btn4"&gt;Btn4&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="content" class="col-sm-9"&gt;
  &lt;div id="pilot" style="display:block;"&gt;
   &lt;p&gt;Name1&lt;/p&gt;
   &lt;h4&gt;my name is A..........&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="design" style="display:block;"&gt;
   &lt;p&gt;Name2&lt;/p&gt;
   &lt;h4&gt;my name is A..........&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="instrument" style="display:block;"&gt;
   &lt;p&gt;Name3&lt;/p&gt;
   &lt;h4&gt;my name is A..........&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="innovations" style="display:block;"&gt;
   &lt;p&gt;Name4&lt;/p&gt;
   &lt;h4&gt;my name is A..........&lt;/h4&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have tried two jquery scripts but not worked as per my requirement...
script1-</p>

<pre><code>$(document).ready(function(){
$("#btn1").click(function(){
    $("#design").css("display","none");
    $("#instrument").css("display","none");
    $("#innovations").css("display","none");
    $("#pilot").css("display","block");
    }

$("#btn2").click(function(){
    $("#pilot").css("display","none");
    $("#instrument").css("display","none");
    $("#innovations").css("display","none");
    $("#design").css("display","block");
    }

$("#btn3").click(function(){
    $("#design").css("display","none");
    $("#pilot").css("display","none");
    $("#innovations").css("display","none");
    $("#instrument").css("display","block");
    }

$("#btn4").click(function(){
    $("#design").css("display","none");
    $("#instrument").css("display","none");
    $("#pilot").css("display","none");
    $("#innovations").css("display","block");
    }
}
</code></pre>

<p>script2-</p>

<pre><code>&lt;script&gt;        
$(document).ready(function(){
$("#btn1").click(function(){
    $("#design").replaceWith( $("#pilot").show() );
    $("#instrument").replaceWith( $("#pilot").show() );
    $("#innovations").replaceWith( $("#pilot").show() );
    }

$("#btn2").click(function(){
    $("#pilot").replaceWith( $("#design").show() );
    $("#instrument").replaceWith( $("#design").show() );
    $("#innovations").replaceWith( $("#design").show() );
    }

$("#btn3").click(function(){
    $("#design").replaceWith( $("#instrument").show() );
    $("#pilot").replaceWith( $("#instrument").show() );
    $("#innovations").replaceWith( $("#instrument").show() );
   }

$("#btn4").click(function(){
    $("#design").replaceWith( $("#innovations").show() );
    $("#instrument").replaceWith( $("#innovations").show() );
    $("#pilot").replaceWith( $("#innovations").show() );
    }
}
&lt;/script&gt;
</code></pre>

<p>so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx</p>