How to widen the accordion on a Blackboard page

Introduction

My university uses the Blackboard online learning environment (there are others, e.g., Moodle and Canvas, etc.). On several of the Unit (aka Module) and short course sites we have an accordion containing the table with the timetable of the teaching. Unfortunately I find the default width too narrow.

This post shows how to make this accordion element wider.

Widening the accordion

First we need to work out what type of element it is. To do this in Google Chrome right click on a part of the accordion and click Inspect.

We can see that the accordion is a div of class deo-accordion. And we can see that it’s max-width is currently set to 40em which is 640 pixels.

Therefore to modify this we need to write the CSS for this with a larger max-width. It turns out Blackboard does not allow us to put CSS in a <style> tag directly in a component’s source code. Therefore, we put the following in a file called mystyles.css. The 60em is equivalent to 960 pixels.

.deo-accordion {
  max-width: 60em;
}

We then upload this file to our Blackboard site’s Content area. Once uploaded we obtain the Permanent URL of the file by clicking the dropdown arrow to the right of the filename and selecting 360° View. Copy the permanent URL to the clipboard.

Within the content of the item on your Blackboard page which contains the accordion, click edit, then click the <> symbol to enter editing source code mode. At the bottom of the code enter the following line – replacing the PERMANENT_URL with what we just copied and save the changes.

<link href="PERMANENT_URL" rel="stylesheet">

And you should find that you have a wider accordion.

Summary

I have shown how to widen the accordion on a Blackboard page with some simple CSS.