Bootstrap Nav-tab show hide content
<p>In the app that I am building to learn Rails and JS, I want to use tab-navigation.  </p>

<p>This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <code>&lt;li&gt;</code> while display the respective section?</p>

<p>I can't do getElementById or so. So, I need something like this structure:</p>

<pre><code>$("li.presentation").on("click", function(event) { ...
    $(...).class("active");
    $(...).toggle();
};
</code></pre>

<p>All help appreciated!</p>

<pre><code>&lt;nav&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li role="presentation" class="active"&gt;&lt;a href="#tab1"&gt;Details&lt;/a&gt;&lt;/li&gt;
    &lt;% unless @annotation.new_record? %&gt;
    &lt;li role="presentation"&gt;&lt;a href="#tab2"&gt;Tags&lt;/a&gt;&lt;/li&gt;
    &lt;li role="presentation"&gt;&lt;a href="#tab2"&gt;Comments&lt;/a&gt;&lt;/li&gt;
    &lt;% end -%&gt;
   &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>Sections</p>

<pre><code>&lt;section id="tab1" class="tab1"&gt;
    &lt;p&gt;Section 1 content here &lt;/p&gt;
&lt;/section&gt;
&lt;section id="tab2" class="tab2"&gt;
    &lt;p&gt;Section 2 content here &lt;/p&gt;
&lt;/section&gt;
&lt;section id="tab3" class="tab3"&gt;
    &lt;p&gt;Section 1 content here &lt;/p&gt;
&lt;/section&gt;
&lt;section id="tab3" class="tab3"&gt;
    &lt;p&gt;Section 3 content here &lt;/p&gt;
&lt;/section&gt;
</code></pre>

<p>This is my css</p>

<pre class="lang-css prettyprint-override"><code>.tab1 {
    display: block;
}

.tab2 {
    display: none;
}

.tab3 {
    display: none;
}
</code></pre>