javascript - Multi-level menu for an FAQ -

i making faq ask 3 question give correct answer. works in same way website: nokia lumia faq.

the code works. have 3 level of content see depending on button press. when button pressed on level 1, level 2 , level 3 change color end 3 button have changed color, easier understand in way wanted example: phone - andriod - simcard help.

notice level 1 , level 2 content have simliar in js code, level 3 bit different because there browser scroll down when content displayed. , level 3 have hyperlink instead of button.

i have manually dublicate part of js code adding new buttons, , think there can easier way. appreciate help.

here js:

$(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 pressed , therefore 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 

here part of html

<button class="click-1" id="click-1a">mobile</button>  <button class="click-1" id="click-1b">pc</button>  <button class="click-1" id="click-1c">tablet</button>  <div id="showmore-1a" class="showmore-1">view content mobile help</div> <div id="showmore-1b" class="showmore-1">view content pc help</div> <div id="showmore-1c" class="showmore-1">view content tablet help</div> enter code here 

here css

.clickcolor {     background-color: #4d4d4d !important; }  .clickcolortext {     color: #4d4d4d !important; } 

add target attribute on buttons:

<button class="click-1" id="click-1a" data-target="#showmore-1a">mobile</button>  <button class="click-1" id="click-1b" data-target="#showmore-1b">pc</button>  <button class="click-1" id="click-1c" data-target="#showmore-1c">tablet</button> 

js

$('button.click-1').click(function(){       $('.click-1').removeclass('clickcolor')       $(this).addclass('clickcolor');       show($(this).data('target')); });