silentScroll to collapsible

by James Foxlee

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page">
    <div data-role="header">
         <h1>Page</h1>
    </div>
    <div role="main" class="ui-content">
        <div data-role="collapsibleset" id="glossary"></div>
        <div id="testText">This will hopefully have clickable links redirecting to a glossary after the function has run.</div>
    </div>
</div>

CSS

.glossaryLink{
  font-color: black !important;
  border:none;
  border-radius: 4px;
  padding:4px;
  box-shadow: 3px 3px 3px red;
  text-decoration: none;
}

JavaScript

$(document).on("pagecreate", function(){
    var glossary = [
        {
            "Term": "clickable",
            "TermDefinition": "Any active area that can be interacted with or triggered by the user."
        },
        {
            "Term": "glossary",
            "TermDefinition": "A list of terms and definitions."
        },
        {
            "Term": "hopefully",
            "TermDefinition": "In a hopeful manner."
        }
    ];
    
    buildGlossary();
    var toScan = $("#testText").html();
    toScan = insertGlossarySpans(toScan);
    $("#testText").html(toScan);
    addGlossaryClickHandlers($("#testText"));
                                     
                                     
    function buildGlossary(){
        var glosHTMLString = "";
        for(var i = 0, len = glossary.length; i < len; i++){
          glosHTMLString +=
            '<div data-role="collapsible" id="' + glossary[i].Term + '"><h4>' + glossary[i].Term + '</h4>';
          glosHTMLString += "<p>" + glossary[i].TermDefinition + "</p></div>";
        }
        // terminate HTML and add to DOM
        $("#glossary").append(glosHTMLString);
        $("#glossary").enhanceWithin();
  }
    
function insertGlossarySpans(string){
    console.log("In the span function!!");
    // failsafe in case glossary fails to load
    if (!glossary) { return string; }

    for(var i = 0, glen = glossary.length; i < glen; i++){
      // search for any instances of that term
      var term = glossary[i].Term;
      // if converting to uppercase makes no difference, it's an acronym
      // so we do a case sensitive compare
      // will stop e.g. "bp" being hyperlinked if in middle of a word
      var flags = (term === term.toUpperCase()) ? "g" : "gi";
      var regex = new RegExp(term, flags);
      string = string.replace(regex, function(match, offset, string){
        // see if we are in the middle of a string
        var charBefore = string.charAt(offset - 1);
        var charAfter =...