Multi-level menu for an FAQ

Question

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: Nokia Lumia FAQ.

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: Phone - Andriod - Simcard help.

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.

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.

Here is the 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 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

Here is a part of the 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 for mobile help</div>
<div id="showmore-1b" class="showmore-1">View content for pc help</div>
<div id="showmore-1c" class="showmore-1">View content for tablet help</div>
enter code here

Here is the CSS

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

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

If you have a working code, and you're looking for advice on how to improve the style, codereview.stackexchange.com is a better site. — Barmar, Jan 16 '16 at 22:48

score 1 · Accepted Answer · answered Jan 16 '16 at 22:38

1

Add a 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'));
});

answered Jan 16 '16 at 22:38

charlietfl

170,828
13
121
150

That actually worked. Can i somehow shorten or erase the class showmore-1? It only tells that the content should be not displayed.
View content for mobile help

View content for pc help

View content for tablet help
– Merin RV Jan 16 '16 at 22:55
You wrote a target attribute on my button. Im wondering if i can delete the ID attribute on my buttons, because i dont see they do any purpose? – Merin RV Jan 16 '16 at 23:06
sure...classes are more helpful to group them and unless you have any css specifics per button ID isn't important. Most people when learning javascript want to use ID...simplest selectors , but realistically classes are more helpful – charlietfl Jan 16 '16 at 23:08
ok i deleted now the ID from all 3 buttons, but the code wont work anymore :/? So the ID needs to be there? Btw thx for helping me :)! – Merin RV Jan 16 '16 at 23:12
must be some other code then. Code in answer doesn't use ID of buttons, it does for the content – charlietfl Jan 16 '16 at 23:13
You had right it worked now, you are awesome :D! Just one more thing in my html code i have 3 div below the buttons. Those 3 div contain a ID attribute and a Class attribute. Can i replace the class attribute and put in the JS somehow? The class attribute makes the div not displayed. – Merin RV Jan 17 '16 at 00:18

score 0 · Answer 2 · answered Jan 16 '16 at 22:34

To shorten this bit of code:

$('#click-1a').click(function () {
  show('#showmore-1a');
});

$('#click-1b').click(function () {
  show('#showmore-1b');
});

$('#click-1c').click(function () {
  show('#showmore-1c');
});

Well, I could tell this:

$('[id^="click-"]').click(function () {
  show('#showmore-' + this.id.replace("click-", ""));
});

Multi-level menu for an FAQ

2 Answers2