title: Show html partial on link active/click - Bootstrap with Rails 4
body: <p>I have a html file in my Rails 4 app which has a header and some common text applicable to each of the relevant policies. The common text has three link tags (not currently linked to anything) called: Terms, Privacy, Copyright.</p>
  
  <p>I then have 3 partials in my views folder which contains the content for each policy (called _terms.html.erb, _privacy.html.erb and _copyright.html.erb). I want to show the content of the partial beneath the common text area, as follows:</p>
  
  <ol>
  <li><p>when the page first loads, I want to display the Terms partial.</p></li>
  <li><p>when one of the the other policy names is clicked, i want to display the relevant partial.</p></li>
  </ol>
  
  <p>I have tried adapting Bootstrap js collapse as follows:</p>
  
  <pre><code>&lt;%= link_to "Terms", data-toggle="collapseTerms", aria-expanded="false", aria-controls="collapseTerms" %&gt;
  
  
              &lt;div class="collapse" id="collapseTerms"&gt;
                  &lt;div class="well"&gt;
                      &lt;%= render 'stac/terms'  %&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
  </code></pre>
  
  <p>The above doesnt work - it gives an error that says: undefined local variable or method `data'  (I don't know what this means)</p>
  
  <p>How do I do this. I have made some js form helpers for circumstances where I've wanted to hide nested forms until an earlier form input is created, but it's not really the same situation this time, because i want the terms partial to display until one of the other two is clicked, at which time, I want the relevant partial to display beneath the common text.</p>
  
  <p>How do you render a partial if a link is clicked, subject to one of them being rendered until one of the other links are clicked?</p>
  
  <p>My entire effort to use Bootstrap Tabs is:</p>
  
  <p>ATTEMPT 1</p>
  
  <pre><code>&lt;ul id="myTabs" class="nav nav-tabs" role="tablist"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href "#terms" aria-controls="terms" role="tab" data-toggle="tab"&gt;Terms&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab"&gt;Privacy&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#licence" aria-controls="licence" role="tab" data-toggle="tab"&gt;Licence&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#trust" aria-controls="trust" role="tab" data-toggle="tab"&gt;Trust&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab"&gt;Reliance&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  
    &lt;/ul&gt;
  
  
  &lt;div class="tab-content"&gt;
                  &lt;div role="tabpanel" class="tab-pane active" id="terms"&gt;&lt;%= render 'static/intpolicy/terms'  %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="privacy"&gt;&lt;%= render 'static/intpolicy/privacy' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="licence"&gt;&lt;%= render 'static/intpolicy/licence' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="trust"&gt;&lt;%= render 'static/intpolicy/trust' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="importantnotice"&gt;&lt;%= render 'static/intpolicy/bby' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="pricing"&gt;&lt;%= render 'static/intpolicy/pricing' %&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
  &lt;%= javascript_tag do %&gt;
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  $('#myTabs a:first').tab('show')
  &lt;% end %&gt;
  </code></pre>
  
  <p>When I try this I get ugly styling and tabs that you can click on. Nothing happens when you click and I'm only mildly concerned about the styling given how many other problems subsist.</p>
  
  <p>ATTEMPT 2 (which is the style I would prefer to use if it can be made to work)</p>
  
  <p>Mostly the same as tab 1, except that I tried to make the list of options which Bootstrap styles like a navbar look more like the rest of my formatting:</p>
  
  <pre><code>&lt;div role="presentation" class="intpol1","active"&gt; &lt;%= link_to "Terms", "#collapseTerms", 'data-toggle'=&gt;"collapse", 'aria-expanded'=&gt;"false", 'aria-controls'=&gt;"collapseTerms" %&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2"&gt;
                  &lt;div role="presentation" class="intpol1"&gt; &lt;%= link_to "Privacy", "#collapsePrivacy", 'data-toggle'=&gt;"collapse", 'aria-expanded'=&gt;"false", 'aria-controls'=&gt;"collapsePrivacy" %&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2"&gt;
                  &lt;div class="intpol1"&gt;Licence&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-2"&gt;
                  &lt;div class="intpol1"&gt;Trust&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2"&gt;
                  &lt;div class="intpol1"&gt;Reliance&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2"&gt;
                  &lt;div class="intpol1"&gt;Pricing&lt;/div&gt;
              &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
          &lt;div class="col-sm-8 col-sm-offset-2"&gt;
  
              &lt;div class="tab-content"&gt;
                  &lt;div role="tabpanel" class="tab-pane active" id="terms"&gt;&lt;%= render 'static/intpolicy/terms'  %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="privacy"&gt;&lt;%= render 'static/intpolicy/privacy' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="licence"&gt;&lt;%= render 'static/intpolicy/licence' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="trust"&gt;&lt;%= render 'static/intpolicy/trust' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="importantnotice"&gt;&lt;%= render 'static/intpolicy/bby' %&gt;&lt;/div&gt;
                  &lt;div role="tabpanel" class="tab-pane" id="pricing"&gt;&lt;%= render 'static/intpolicy/pricing' %&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  
  
  &lt;%= javascript_tag do %&gt;
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  $('#myTabs a:first').tab('show')
  &lt;% end %&gt;
  </code></pre>
  
  <p>From this attempt you can see that only the first two labels appear as links (intentional- I didn't finish this attempt because the first two links don't work).</p>
  
  <p>All of the text inside the render/partial files appears in a row (just ignoring the intended tabbed display).</p>
  
  <p>I can't find any errors in this.  How do you use Bootstrap Tabs?  My console inspector displays css warnings (with bootstrap sass generally but no errors).</p>
  
  <p>One difference between these attempts is that the first one - when you hover over a tab, the bottom of the screen says go to #terms, whereas when you hover over the link in the second one it says go to #collapseTerms</p>
  
  <p>Another curious thing is that, I changed the second attempt to refer to the #terms &amp; #privacy as id="terms" or id ="privacy":</p>
  
  <pre><code>&lt;div role="presentation" class="intpol1","active"&gt; &lt;%= link_to "Terms", id="#terms", 'data-toggle'=&gt;"collapse", 'aria-expanded'=&gt;"false", 'aria-controls'=&gt;"terms" %&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2"&gt;
                      &lt;div role="presentation" class="intpol1"&gt; &lt;%= link_to "Privacy", id="#privacy", 'data-toggle'=&gt;"collapse", 'aria-expanded'=&gt;"false", 'aria-controls'=&gt;"privacy" %&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The effect of this is that when you click on the second attempt links for terms, it moves the footer on the bottom of the page up, to put it on top of the start of the html in the terms partial. You click the terms link again and it goes away. Strangely, the same thing doesn't happen when you click the privacy link.</p>