0

I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/

It works fine there.

Same exact code on google apps script, nadda. What do I need to change to make this work properly there?

test4.html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <base target="_top">
  </head>
  <body>
    <div data-role="collapsible-set" id="set">
      <div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
        <h3>Stuff</h3>
        <button type="button" id="submit" data-mini="true">Submit</button> 
      </div>
    </div>
    <?!= include('test4JS'); ?>
  </body>
</html>

test4JS:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  $('#submit').on('click', collapse);

  function collapse(sender) {
    $("#set").children(":first").collapsible( "collapse" );
    //$(".stuff").collapsible("collapse");
    //$("#set").children(":first").trigger( "collapse" );
    //$(".stuff").trigger("collapse");
    //none of these work
  }

</script>
TheMaster
  • 45,448
  • 6
  • 62
  • 85
TulsaNewbie
  • 382
  • 3
  • 15
  • 1
    Have you tried it without `include()` – TheMaster Jun 29 '19 at 17:50
  • oh, you mean putting the javascript directly on the page? – TulsaNewbie Jun 29 '19 at 17:51
  • Yes`````````.````````` – TheMaster Jun 29 '19 at 17:53
  • I had not, but you're right... that "works"... and in the process of that, I figured out that I am loading jquery 2.2.4 on my web page, and 3.4.1 in my javascript file. changing it to 2.2.4 in the js file "works" ... but all my layout depended on both of those being different in each file and now I have no idea what's going on, hah... – TulsaNewbie Jun 29 '19 at 18:08
  • This topic [Use of form structure inside jQuery accordion on Google App Scripts](https://stackoverflow.com/q/14285497/1330560) might be useful. They have several accordions and an accepted answer. – Tedinoz Jun 30 '19 at 05:13
  • 1
    FYI, including jQuery-UI and jQuery-Mobile inside the same page is an advanced topic, You will experience some strange issues until You are aware how these libraries works. – deblocker Jun 30 '19 at 07:30
  • see here: https://stackoverflow.com/a/41163312/4845566 – deblocker Jun 30 '19 at 07:54
  • Your question isn't clear. https://stackoverflow.com/a/20002186/1771795 – Omar Jul 01 '19 at 13:12

0 Answers0