title: Multi-level menu for an FAQ
body: <p>I am making a FAQ that ask you 3 question to give you the correct answer. It works in the same way as this website: <a href="https://goo.gl/Z90Mtl" rel="nofollow">Nokia Lumia FAQ</a>.</p>
  
  <p>The code works. You have 3 level of content to see depending on the button you press. When a button is pressed on level 1, level 2 and level 3 it will change color so you end with three button that have changed color, its easier to understand in that way you wanted help for Example: <em>Phone - Andriod - Simcard help.</em></p>
  
  <p>Notice that level 1 and level 2 content have much simliar in the JS code, but level 3 is a bit different because there your browser scroll you down when the content is displayed. And also level 3 does have hyperlink instead of button.</p>
  
  <p>I have to manually dublicate part of this JS code for adding new buttons, and i think there can be an easier way. I really appreciate any help.</p>
  
  <p><strong>Here is the JS:</strong></p>
  
  <pre><code>$(document).ready(function(){
  
  // Level 1
  function show(sel) {
    var el = $(sel);
    el.fadeToggle();
    $('.showmore-1').not(el).fadeOut("slow");
  }
  
  $('.showmore-1').hide();
  
  $('.click-1').click(function(){
      $('.click-1').removeClass('clickcolor')
          $(this).addClass('clickcolor');
  });
  
  $('#click-1a').click(function () {
    show('#showmore-1a');
  });
  
  $('#click-1b').click(function () {
    show('#showmore-1b');
  });
  
  $('#click-1c').click(function () {
    show('#showmore-1c');
  });
  
  
  // Level 2
  function show(sel) {
    var el = $(sel);
    el.fadeToggle();
    $('.showmore-2').not(el).fadeOut("slow");
  }
  
  $('.showmore-2').hide();
  
  $('.click-2').click(function(){
      $('.click-2').removeClass('clickcolor')
          $(this).addClass('clickcolor');
  });
  
  $('#click-2a').click(function () {
    show('#showmore-2a');
  });
  
  $('#click-2b').click(function () {
    show('#showmore-2b');
  });
  
  $('#click-2c').click(function () {
    show('#showmore-2c');
  });
  
  // Level 3
  function show(sel) {
    var el = $(sel);
    el.fadeToggle();
    $('.showmore-3').not(el).fadeOut("slow");
  }
  
  $('.showmore-3').hide();
  
  $('.click-3').click(function(){
      $('.click-3').removeClass('clickcolortext') //Level 3 display text instead of button to be pressed and therefore another class of color.
      $(this).addClass('clickcolortext');
  });
  
  $('#click-3a').click(function () {
    show('#showmore-3a');
    $('html, body').scrollTop($('#showmore-3a').offset().top);
    return false; 
  });
  
  $('#click-3b').click(function () {
    show('#showmore-3b');
    $('html, body').scrollTop($('#showmore-3b').offset().top);
    return false; 
  });
  
  $('#click-3c').click(function () {
    show('#showmore-3c');
    $('html, body').scrollTop($('#showmore-3c').offset().top);
    return false; 
  });
  
  });
  enter code here
  </code></pre>
  
  <p><strong>Here is a part of the HTML</strong></p>
  
  <pre><code>&lt;button class="click-1" id="click-1a"&gt;Mobile&lt;/button&gt; 
  &lt;button class="click-1" id="click-1b"&gt;PC&lt;/button&gt; 
  &lt;button class="click-1" id="click-1c"&gt;Tablet&lt;/button&gt;
  
  &lt;div id="showmore-1a" class="showmore-1"&gt;View content for mobile help&lt;/div&gt;
  &lt;div id="showmore-1b" class="showmore-1"&gt;View content for pc help&lt;/div&gt;
  &lt;div id="showmore-1c" class="showmore-1"&gt;View content for tablet help&lt;/div&gt;
  enter code here
  </code></pre>
  
  <p><strong>Here is the CSS</strong></p>
  
  <pre><code>.clickcolor {
      background-color: #4d4d4d !important;
  }
  
  .clickcolortext {
      color: #4d4d4d !important;
  }
  </code></pre>