diff --git a/css/elements.css b/css/elements.css
index de9bbfbb..773a4664 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -600,7 +600,8 @@ tr.del > td {
   white-space: nowrap;
 }
 
-#menu-toc .item-toggle {
+#menu-toc .item-toggle,
+#menu-pins-header .item-toggle {
   display: inline-block;
   transform: rotate(-45deg) translate(-5px, -5px);
   transition: transform 0.1s ease;
@@ -619,6 +620,12 @@ tr.del > td {
   cursor: pointer;
 }
 
+#menu-pins-header .item-toggle { /*overwrite the transform style in the above css selector, so we can get a upward pin arrow*/
+  transform: rotate(-135deg);
+  transform-origin: center;
+  transition: transform 0s ease;
+}
+
 #menu-toc .item-toggle-none {
   display: inline-block;
   width: 20px;
@@ -628,11 +635,19 @@ tr.del > td {
   transform: rotate(45deg) translate(-5px, -5px);
 }
 
-#menu-toc li > ol {
+#menu-pins-header.active > .item-toggle{  /*extra css style for the downward pin arrow*/
+  transform: rotate(45deg);
+  transform-origin: center;
+  transition: transform 0s ease;
+}
+
+#menu-toc li > ol,
+#menu-pins-header + #menu-pins-list {
   display: none;
 }
 
-#menu-toc li.active > ol {
+#menu-toc li.active > ol,
+#menu-pins-header.active + #menu-pins-list {
   display: block;
 }
 
@@ -699,10 +714,10 @@ tr.del > td {
   flex-grow: 0;
   flex-shrink: 0;
   width: 100%;
-  
+
   display: flex;
   flex-direction: column;
-  
+
   max-height: 300px;
 }
 
diff --git a/js/menu.js b/js/menu.js
index 9b55c89d..24b6c12e 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -238,7 +238,7 @@ function Menu() {
   document.addEventListener('keydown', this.documentKeydown.bind(this));
 
   // toc expansion
-  var tocItems = this.$menu.querySelectorAll('#menu-toc li');
+  var tocItems = this.$menu.querySelectorAll('#menu-toc li, #menu-pins .menu-pane-header');
   for (var i = 0; i < tocItems.length; i++) {
     var $item = tocItems[i];
     $item.addEventListener('click', function($item, event) {
@@ -848,3 +848,20 @@ document.addEventListener('DOMContentLoaded', function () {
   Toolbox.init();
   referencePane.init();
 })
+
+// collapsible pin pane
+document.addEventListener('DOMContentLoaded', collapsiblePinPane);
+
+function collapsiblePinPane() {
+  var MenuPins = document.getElementById('menu-pins');
+  var MenuPaneHeader = MenuPins.querySelector('.menu-pane-header');
+  MenuPaneHeader.setAttribute('id', 'menu-pins-header'); // Give the header an id for convenience.
+
+  var pinButton = document.createElement('span');
+  pinButton.textContent = "◢";
+  pinButton.setAttribute('class', 'item-toggle');
+  pinButton.style.cssFloat = 'right'; // Float the button to the right side, making it easier to be noticed.
+  pinButton.style.color = 'black'; // Set a different color for it, so the button won't be mixed with the background.
+
+  MenuPaneHeader.appendChild(pinButton);
+}