Branching menu solution

Community Member

3 months ago

Hi Paul,

Create a custom variable and name it showMenu and make the varabile a number, and make the default number 3.

Have two buttons that change the showMenu variable to 1 or 2 depending on which menu items you want to show up in the side panel.

Then on your Slide Master have trigger that will execute the JavaScript when the showMenu changes.

Here is the JavaScript that you would put on your Master Slide:

const boxes = document.querySelectorAll('.cs-listitem');

function changeText() {

// Select the element with the class 'linkText'

var menuSel = getVar("showMenu");

switch (menuSel) {

case 0:

//GCNA menu items hide

document.querySelector("#outline-content > ul > li:nth-child(2) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(1) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(2) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(3) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(4) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(5) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(6) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(7) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(8) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(9) > div").style.display = 'none' //

//GSFB menu items hide

document.querySelector("#outline-content > ul > li:nth-child(3) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(1) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(2) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(3) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(4) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(5) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(6) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(7) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(8) > div").style.display = 'none' //

document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(9) > div").style.display = 'none' //

break;

case 1:

//GCNA menu items show

document.querySelector("#outline-content > ul > li:nth-child(2) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(1) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(2) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(3) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(4) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(5) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(6) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(7) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(8) > div").style.display = 'block' //

document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(9) > div").style.display = 'block' //