[Koha] some jQuery advice please?

2 Sep 2020

      Hi folks

My Javascript/jQuery skills are rudimentary at best and I hope someone might be able to help me out.

I'm trying to collapse large blocks of ISBNs on OPAC records (where for example we have someone's works catalogued as a set and every volume has a different ISBN).

We have a similar bit of jQuery that collapses large contents notes:

----
// Collapse contents on OPAC
if(window.location.href.indexOf("cgi-bin/koha/opac-detail.pl?biblionumber") > -1) {
  $(document).ready(function(){
    var countclass = $(".contentblock").length; //counts number of contentblocks
    if(countclass > 0){ //if more than one contentblock
    var expander = "<div id='expander' style='font-size:14px; color:green;'>Click to Expand +</div>"; //create expansion button
    function tog(){$(document).find('.contentblock').slideToggle("slow")}; //create slide toggle function
    function typ(){ //change expansion button based on display of contentblocks
        if($(".contentblock").css('display') == 'block'){
          $("#expander").text("Click to Expand +");
        }else if($(".contentblock").css('display') == 'none'){
          $("#expander").text("Click to Collapse -");
        };
    };
    $("span:contains('Contents:')").append(expander); //add expansion button to page
    $(".contentblock").hide(); //hide contentblocks initially
    $("#expander").click(function(){ //execute the two functions when the expansion button is clicked
      typ();
      tog();
    });
    };
  });
}
----
(from https://wiki.koha-community.org/wiki/JQuery_Library#Collapsible_contents_in_...)

I thought if I replaced instances of ".contentblock" with ".isbn" this might do what I want:
----
// Collapse ISBNs on OPAC
if(window.location.href.indexOf("cgi-bin/koha/opac-detail.pl?biblionumber") > -1) {
  $(document).ready(function(){
    var countisbns = $(".isbn").length; //counts number of isbns
    if(countisbns > 2){ //if more than 3 isbns
    var expander = "<div id='expander' style='font-size:14px; color:green;'>Click to Expand +</div>"; //create expansion button
    function tog(){$(document).find('.isbn').slideToggle("slow")}; //create slide toggle function
    function typ(){ //change expansion button based on display of isbns
        if($(".isbn").css('display') == 'block'){
          $("#expander").text("Click to Expand +");
        }else if($(".isbn").css('display') == 'none'){
          $("#expander").text("Click to Collapse -");
        };
    };
    $("span:contains('ISBN:')").append(expander); //add expansion button to page
    $(".isbn").hide(); //hide isbns initially
    $("#expander").click(function(){ //execute the two functions when the expansion button is clicked
      typ();
      tog();
    });
    };
  });
}
----

Unfortunately that doesn't work.

I can see that the contents blocks look like <div class="contentblock" property="description" style="display: block;"> while ISBNs look like <span property="isbn"> (so really I should have used "#isbn" rather than ".isbn" but that didn't work either).

How do I select these ISBNs so that I can hide them? Should I be using XPath or CSS Selectors instead?

With kind regards from the Dalton McCaughey Library Team

Carlos Lopez

Dalton McCaughey Library | 29 College Crescent, Parkville, VICTORIA 3052

Ph: 03 9340 8888 ext.1 | library@dml.vic.edu.au<mailto:library@dml.vic.edu.au> | library.dmlibrary.org.au