Skip to content

Instantly share code, notes, and snippets.

@Dizolivemint

Dizolivemint/snap-accordion.js

Last active February 20, 2019 19:49
Show Gist options
  • Save Dizolivemint/82a6fd0213e3264b0b64d7faadf7bebd to your computer and use it in GitHub Desktop.
Save Dizolivemint/82a6fd0213e3264b0b64d7faadf7bebd to your computer and use it in GitHub Desktop.
Download ZIP
Accordion menus for Moodle course shells (Snap DOM)
Raw
snap-accordion.js
$(document).ready(function () {
/*
// ****** EDIT THIS SECTION ONLY *******
// ****** Change Section Number and Accordion Titles *******
// ****** Change Webinar Resource Titles added last *******
// ****** Everything on the page is auto categorized *******
*/
/* Section */
var section = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
/* Accordion Titles Here */
var accTitle = ["Reading(s)", "Assignment(s) and Activities", "Webinar Resource(s)", "Video(s)"];
/* Webinar Resource Titles Here */
webinarResourceTitle = ["Webinar", "Lecture Slides"];
/* ***********************************************************
Put Reading Titles Here */
var readingTitle = ['Reading:'];
/* Put Reading Text Here */
var readingText = [];
/* Put Assignment Titles Here */
var assignmentTitle = ['Activity:'];
/* Put Assignments Referenced from previous sections (week) */
/* Assignment Title */
var clonedTitle = [];
/* Section of the Title */
var clonedSection = [];
/* Initialize General Course Information Section */
initGCI();
/* Loop through sections and add accordions */
for (var x = 0; x < section.length; x++) {
createAcc(section[x], accTitle, readingTitle, readingText, assignmentTitle, clonedTitle, clonedSection, webinarResourceTitle);
}
/* ***********************************************************************
// ********** Everything after this does not need to be set **************
// *********************************************************************** */
function createAcc(section, accTitle, readingTitle, readingText, assignmentTitle, clonedTitle, clonedSection, webinarResourceTitle) {
section = "#section-" + section;
// Number of Accordions
var numAccordions = accTitle.length;
var arrow = ["▶", "▼"];
var accordion = [];
for (var x = 0; x < numAccordions; x++) {
accordion.push(`
<p>
<button class="accordion${x} accordion btn btn-secondary" style="width:100%; text-align:left;">
${arrow[0]} ${accTitle[x]}
</button>
</p>
<div class="div-acc${x} panel" style="display:block; padding: 0 18px; background-color: white;">
</div>`
);
// Attach Accordions to Section Summary
$(`${section} .content .summary`).append(accordion[x]);
}
/*********************/
/* Reading Accordion */
/*********************/
/* Use the class .topanelA to put content in the assignment accordion (.e.g. <div class="topanelA">) */
var reading = [$(`${section} .topanelA`)];
for (var x = 0; x < readingText.length; x++) {
reading.push(
$(`<p>${readingText[x]}</p>`)
);
}
for (var x = 0; x < readingTitle.length; x++) {
reading.push(
$(`
${section} .snap-resource:contains("${readingTitle[x]}")
`)
);
}
reading.push(
$(`
${section} .activity.snap-mime-pdf
`),
$(`
${section} .activity.snap-mime-document
`),
$(`
${section} .activity.modtype_url
`)
);
for (var y = 0; y < reading.length; y++) {
$(`${section} .div-acc0`).append(reading[y]);
}
/* Use the class .topanelB to put content in the reading accordion (.e.g. <div class="topanelB">) */
var assign = [$(`${section} .topanelB`)];
/************************/
/* Assignment accordion */
/************************/
/* Grab all Activities */
for (var x = 0; x < assignmentTitle.length; x++) {
assign.push(
$(`
${section} .snap-resource:contains("${assignmentTitle[x]}")
`)
);
}
assign.push(
$(`
${section} .activity.modtype_choice
`),
$(`
${section} .activity.modtype_quiz
`),
$(`
${section} .activity.modtype_assign
`),
$(`
${section} .activity.modtype_hsuforum
`)
);
for (var y = 0; y < assign.length; y++) {
$(`${section} .div-acc1`).append(assign[y]);
}
/* Assignments Accodion: Include div.topanel in top of assignments section
// Cloned assignments from previvous weeks */
var assignClone = [];
for (var x = 0; x < clonedTitle.length; x++) {
assignClone.push(
$(`
${clonedSection[x]} .activity.snap-activity:contains("${clonedTitle[x]}")
`)
);
}
for (var y = 0; y < assignClone.length; y++) {
$(`${section} .div-acc1`).append(assignClone[y].clone());
}
/*
if ($(`${section} .div-acc1`).children().length == 0) {
$(`${section} .div-acc1`).append('<p><strong>None</strong></p>');
}
*/
$(`${section} .content .summary`).append('<p><strong>Check your <a href="https://elearning.pacificcollege.edu/calendar/view.php?view=month" target="_blank">calendar</a> for upcoming assignments.</strong></p>');
/*********************/
/* Webinar Accordion */
/*********************/
var webinar = [
$(`${section} .snap-asset:contains('${webinarResourceTitle[0]}')`),
$(`${section} .snap-resource:contains('${webinarResourceTitle[1]}')`)
];
for (var y = 0; y < webinar.length; y++) {
$(`${section} .div-acc2`).append(webinar);
}
if ($(`${section} .div-acc2`).children().length == 0) {
$(`${section} button.accordion2`).hide();
}
/* Check Reading Accordion Div after Webinar Resources are Moved */
/*
if ($(`${section} .div-acc0`).children().length == 0) {
$(`${section} .div-acc0`).append("<p><strong>None</strong></p>");
}
*/
/* Hide accordions if content doesn't exist */
if ($(`${section} .div-acc0`).children().length == 0) {
$(`${section} button.accordion0`).hide();
}
if ($(`${section} .div-acc1`).children().length == 0) {
$(`${section} button.accordion1`).hide();
}
/********************/
/* Videos Accordion */
/********************/
var videos = $(`${section} .snap-mime-page:contains('Video:')`);
if (videos.length === 0) {
$(`${section} button.accordion3`).hide();
}
$(`${section} .div-acc3`).append("<i>*All videos are expected to be viewed before class. At the discretion of the faculty member, videos may also be shown during class.</i>");
$(`${section} .div-acc3`).append(videos);
$(`${section} .div-acc${numAccordions - 1}`).ready(function () {
for (var i = 0; i < numAccordions; i++) {
(function (i) {
$(`${section} .div-acc${i}`).css("display", "none");
$(`${section} button.accordion${i}`).click(function () {
if ($(`${section} .div-acc${i}`).css("display") == "block") {
$(`${section} .div-acc${i}`).css("display", "none");
$(`${section} button.accordion${i}`).html(`${arrow[0]} ${accTitle[i]}`)
} else {
$(`${section} .div-acc${i}`).css("display", "block");
$(`${section} button.accordion${i}`).html(`${arrow[1]} ${accTitle[i]}`)
}
/* console.log(`Working... ${section} .div-acc${i}`); */
})
})(i);
}
});
}
/* ***************************************************
// ****** General Course Informationn Section ********
// *************************************************** */
function initGCI() {
/* Section */
var section = "#section-0";
/* Create Accordions and Styling for each */
var accordion = [];
var accTitle = ["Syllabus and Documents", "Attendance"];
/* Number of Accordions */
var numAccordions = accTitle.length;
var arrow = ["▶", "▼"];
/* Keep at the Top */
$(`${section} .content .summary`).append($(`${section} .snap-asset:contains('Zoom Webinar')`));
$(`${section} .content .summary`).append($(`${section} .snap-asset:contains('Announcements')`));
for (var x = 0; x < numAccordions; x++) {
accordion.push(`
<p>
<button class="accordion${x} accordion btn btn-secondary" style="width:100%; text-align:left;">
${arrow[0]} ${accTitle[x]}
</button>
</p>
<div class="div-acc${x} panel" style="display:block; padding: 0 18px; background-color: white;">
</div>`
);
// Attach Accordions to Section Summary
$(`${section} .content .summary`).append(accordion[x]);
}
/**********************/
/* Documents Accodion */
/**********************/
/* Detach document resource elements into documents element */
var docs = [$(`${section} .activity.snap-mime-document`), $(`${section} .snap-mime-pdf`)];
for (var i = 0; i < docs.length; i++) {
$(`${section} .div-acc0`).append(docs);
};
/************************/
/* Attendance Accordion */
/************************/
var attendance = $(`${section} .activity.url.modtype_url:contains('Attendance')`);
$(`${section} .div-acc1`).append(attendance);
$(`${section} .div-acc${numAccordions - 1}`).ready(function () {
for (var i = 0; i < numAccordions; i++) {
(function (i) {
$(`${section} .div-acc${i}`).css("display", "none");
$(`${section} button.accordion${i}`).click(function () {
if ($(`${section} .div-acc${i}`).css("display") == "block") {
$(`${section} .div-acc${i}`).css("display", "none");
$(`${section} button.accordion${i}`).html(`${arrow[0]} ${accTitle[i]}`)
} else {
$(`${section} .div-acc${i}`).css("display", "block");
$(`${section} button.accordion${i}`).html(`${arrow[1]} ${accTitle[i]}`)
}
// console.log(`Working... ${section} .div-acc${i}`);
})
})(i);
}
});
}
/****************************/
/* Accordion button styling */
/****************************/
$('button.accordion').css('width', '100%');
$('button.accordion').css('text-align', 'left');
$('button.accordion').css('color', '#005dab');
$('button.accordion').css('border-top-width', '.5em');
$('button.accordion').css('border-color', '#005dab');
$('button.accordion').css('background-color', '#fff');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment