title: show/hide div with id based on data attribute (onclick)
body: <p>I have the following List:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="" class="active" data-related="main"&gt;Main&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="" data-related="title_1"&gt;Title 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="" data-related="title_2"&gt;Title 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="" data-related="title_3"&gt;Title 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="" data-related="title_4"&gt;Title 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the following div structure:</p>
  
  <pre><code>&lt;div id="main"&gt;... Content ...&lt;/div&gt;
  &lt;div id="title_1"&gt;... Content ...&lt;/div&gt;
  &lt;div id="title_2"&gt;... Content ...&lt;/div&gt;
  &lt;div id="title_3"&gt;... Content ...&lt;/div&gt;
  &lt;div id="title_4"&gt;... Content ...&lt;/div&gt;
  </code></pre>
  
  <p>At the beginning all div's are visible. (Because of Google and for User without JS)</p>
  
  <p>If the page is loaded, all except the main div should be hidden. If I'm clicking on the navigation point with the data attribute "title_1" the related div should be visible and the main div should be hidden also. Also the class active should jump to the new active navigation point. :)</p>
  
  <p>Is that possible? I don't know how to get the solution for this problem.</p>
  
  <p>Thanks for your help!</p>