Hacking Your LibGuide: More Accordions for LibGuides

Note: This story is an update to a previous post.

Not quite.

Bootstrap is pretty new to me. I have not spent much time playing with it because I am spending most of my free learning time on Unity (tutorial!). Bootstrap is a front-end framework that is built on a mobile-first philosophy; and LibGuides is built using Bootstrap 3, according to the email I received from Springshare support after I killed my LibGuide yesterday.

In light of this nimble, front-end developer, I have remade the accordions in my LibGuide using Bootstrap:

Important! To run, you need to remove the duplicative jQuery library call

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
...
</html>

Since LibGuides is built using Bootstrap 3, you do not need to add the calls for Bootstrap stylesheets, scripts, or jQuery. They’re already loaded on every page.

This Bootstrap script only requires editing the HTML in a LibGuide box. It does not require editing the CSS or Javascript like the previous iteration I posted. So clean up that wall of text!

This work is part of the Hacking Your LibGuide series.