On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Trying to show / hide some items using Zurb Foundation 3 (Flexibility add on) but I can't get the content to toggle i.e. I can get the content to show but then I can't hide it again. Here is my Tpl:

    <div class="four columns">
    [[+icon]]
    <h2>[[+pagetitle]]</h2>
    <ul id="[[+id]]" class="accordion">
    <li>
    <div class="title">
    <h3>[[+longtitle]]</h3>
    </div>
    <div class="content">
    [[+imagehome]]
    <p>[[+introtext]]</p>
    </div>
    </li>
    </ul>
    </div>


    I found this script but can't get it to work:

    <script>
      $(function() {
        $( "#accordion" ).accordion({
          collapsible: true
        });
      });
      </script>


    Would be grateful for any ideas - fantastic add-on by the way.
    [ed. note: chrisandy last edited this post 5 years, 10 months ago.]
      Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
    • Your script is targetting an accordion ID you need to change it to target the accordion class like this:

      <script>
        $(function() {
          $( ".accordion" ).accordion({
            collapsible: true
          });
        });
        </script>
      
        Benjamin Marte
        Interactive Media Developer
        Follow Me on Twitter | Visit my site | Learn MODX
      • Thank you but already tried that and just tried again to be sure.
          Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
        • What version of Flexibility are you using? (I have updated to a way beter version wich will be fututr proof) http://flexibilitymodx.com

          Also, does the Javascript give any errors?
            MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
            DESIGNfromWITHIN, MPThemes and Any Screen Size
            Follow me on Twitter | Read my blog | My code on GitHub
          • Error:
            ReferenceError: Can't find variable: $

            I'm not quite ready for Foundation 4 yet so still using Flexibility 3.0.6
              Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
            • Is jQuery being referenced before this script tag? Sounds like it's not.
                Benjamin Marte
                Interactive Media Developer
                Follow Me on Twitter | Visit my site | Learn MODX
              • Quote from: benmarte at Jul 24, 2013, 02:19 PM
                Is jQuery being referenced before this script tag? Sounds like it's not.

                Do you mean the order in which things are being called i.e:

                  <script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>
                <script>
                  $(function() {
                    $( ".accordion" ).accordion({
                      collapsible: true
                    });
                  });
                  </script>


                ...or something else - sorry I'm a designer not into js.
                  Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
                • Yes, make sure you have another script tag before that is referencing the jQuery library before any other js file otherwise it won't work.

                  To test place replace the code you posted with this:

                  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
                  <script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>
                  <script>
                    $(function() {
                      $( ".accordion" ).accordion({
                        collapsible: true
                      });
                    });
                    </script>
                  


                  If it works then you are either missing the reference to the jQuery library or it is being called after your plugin.

                  Good luck.
                    Benjamin Marte
                    Interactive Media Developer
                    Follow Me on Twitter | Visit my site | Learn MODX
                  • Well I was doing everything right by the looks of it. I replaced the following files directly from Foundation Zurb:

                    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                    <script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>


                    ...and it works. The files are slightly different from those that ship with Flexibility.

                    Thanks for your help - jQuery was being called as:

                     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                      Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk