title: how to replace div content for button click on same page in bootstrap
body: <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>