💡 Javascript to open all the dropdowns on the course website

[markusyeo]

I've often found opening every single link on the course website under the weekly topics to be very frustrating and annoying. Hence I wrote a simple script that clicks on all the > carets. This currently works on Chrome for me and opens only the > carets on the weekly topic page.

var inputs = document.getElementsByClassName("glyphicon glyphicon-chevron-right")

inputsArray = Array.prototype.slice.call(inputs, 0)
                    // then we filter the Array:
                    .filter(function (el) {
return !(el.ariaHidden);
    });
inputsArray
  .forEach((element) => element.click());

Steps to use:

1. Open developer tools.
2. Open the console tab.
3. Paste the script into the console and wait.

[hingen]

Thanks! Works on Firefox as well, really useful for the Modelling page.

[EvitanRelta]

Here's the same code but using ES6 arrow-functions

const inputs = Array.from(document.getElementsByClassName("glyphicon glyphicon-chevron-right"))
    .filter(ele => !ele.ariaHidden);
console.log('Expanded:', inputs);  // to check what was expanded
inputs.forEach(ele => ele.click());

[EvitanRelta]

Updated the code to keep optionals/videos/table-of-content/recap sections collapsed.

You can change the isToBeCollapsed to vary what you want collapsed.

const not = predicate => ele => !predicate(ele);
const any = (...predicates) => ele => predicates.some(fn => fn(ele));
const clickElement = ele => ele.click();
const containsSelector = selector => ele => Boolean(ele.querySelector(selector));

const isOptional = ele =>
    Boolean(ele.querySelector('.badge.rounded-pill.bg-success')?.innerText.includes('OPTIONAL'));
const isVideo = containsSelector('.glyphicon-facetime-video');
const isTableOfContents = containsSelector('.fas.fa-list-ol');
const isRecap = containsSelector('.glyphicon.glyphicon-education');
const isToBeCollapsed = any(isOptional, isVideo, isTableOfContents, isRecap);

const isExpanded = containsSelector('.glyphicon.glyphicon-chevron-down');
const isCollapsed = containsSelector('.glyphicon.glyphicon-chevron-right');


const allHeaders = Array.from(document.querySelectorAll('.card-header'));

const allToBeExpanded = allHeaders.filter(isCollapsed)
    .filter(not(isToBeCollapsed));
allToBeExpanded.forEach(clickElement);

const allToBeCollapsed = allHeaders.filter(isExpanded)
    .filter(isToBeCollapsed);
allToBeCollapsed.forEach(clickElement);

console.log('Expanded: ', allToBeExpanded);
console.log('Collapsed: ', allToBeCollapsed);