☰

AO3: [Wrangling] Collapse and Expand Tag Lists

On tags landing pages, turns long tag lists into a collapsable/expandable accordion, as well as each subtag which in turn has subtags

  1. // ==UserScript==
  2. // @name         AO3: [Wrangling] Collapse and Expand Tag Lists
  3. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  4. // @description  On tags landing pages, turns long tag lists into a collapsable/expandable accordion, as well as each subtag which in turn has subtags
  5. // @author       escctrl
  6. // @version      1.0
  7. // @match        *://*.archiveofourown.org/tags/*
  8. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function($) {
  13.     'use strict';
  14.  
  15.     // we'll show little triangles pointing down/up to show where subtags are hidden
  16.     const arrow_expand = '▽';
  17.     const arrow_collapse = '△';
  18.  
  19.     // don't make accordions if there are less then this many tags in the list:
  20.     const magic_number = 10;
  21.  
  22.     // ***** SUBTAG ACCORDIONS
  23.  
  24.     // find all subtags that have subtags themselves
  25.     const subhassub = $('div.sub li').has('ul.tags.tree');
  26.  
  27.     $(subhassub).each(function() {
  28.         if ($(this).children('a.accordion').siblings('ul').children().length < magic_number) { return; }
  29.         // after the link of the tag, add the triangle
  30.         $(this).contents().first().after(' <a class="accordion" style="cursor: pointer;">'+arrow_expand+'</a>');
  31.         // event listener to toggle visibility of the following subtag list
  32.         $(this).children('a.accordion').click(toggleAccordion);
  33.         // initialization: hide all subtag lists
  34.         $(this).children('a.accordion').siblings('ul').hide();
  35.     });
  36.  
  37.     function toggleAccordion() {
  38.         $(this).siblings('ul').toggle("fast", "swing");
  39.  
  40.         var is_collapsed = $('<div/>').html(arrow_collapse);
  41.         var is_expanded = $('<div/>').html(arrow_expand);
  42.  
  43.         if ($(this).html() == is_collapsed.html()) { $(this).html(arrow_expand); }
  44.         else if ($(this).html() == is_expanded.html()) { $(this).html(arrow_collapse); }
  45.     }
  46.  
  47.     // ***** VARIOUS TAG LIST GROUP HEADING ACCORDIONS
  48.  
  49.     // find all subtags that have subtags themselves
  50.     const taggroups = $('div.listbox').not('.child,.parent,.meta').find('h3,h4');
  51.  
  52.     $(taggroups).each(function() {
  53.         if ($(this).siblings('ul.tags').children().length < magic_number) { return; }
  54.         // after the link of the tag, add the triangle
  55.         $(this).contents().first().after(' <a class="accordion" style="cursor: pointer; border-bottom: none; font-size: smaller;">'+arrow_expand+'</a>');
  56.         // event listener to toggle visibility of the following tag list
  57.         $(this).children('a.accordion').click(toggleAccordionGroup);
  58.         // initialization: hide all tag lists
  59.         $(this).siblings('ul.tags').hide();
  60.     });
  61.  
  62.     function toggleAccordionGroup() {
  63.         $(this).parent().siblings('ul').toggle("fast", "swing");
  64.  
  65.         var is_collapsed = $('<div/>').html(arrow_collapse);
  66.         var is_expanded = $('<div/>').html(arrow_expand);
  67.  
  68.         if ($(this).html() == is_collapsed.html()) { $(this).html(arrow_expand); }
  69.         else if ($(this).html() == is_expanded.html()) { $(this).html(arrow_collapse); }
  70.     }
  71.  
  72.  
  73. })(jQuery);