Menu icon Foundation
Accordion doesn't open/close and +/- icons don't appear

Version: Foundation 5.4.7 using CSS and basic accordion code sample
http://www.janetandbeyond.com/test-site/classes.html
http://www.janetandbeyond.com/test-site/css/foundation-icons.css
http://www.janetandbeyond.com/test-site/css/custom.css

I'm seeking help getting the basic accordion to open/close. When the .active li is clicked, it behaves like a bookmark (note it in URL in address bar) by scrolling the page down rather than closing the accordion section. No sections open or close onclick. The script calls are at the bottom of the html page. No idea whether they are done correctly.

I'm also unsure about how to display the +/- icons. I tried adding the accordion arrow style declarations first to the custom.css file and next to the foundation.fonts.css. Neither worked.

I'm still learning my way around Foundation 5 and need some pointers.

Thanks in advance folks!

      <!-- begin accordion -->

                   <ul class="accordion active" data-accordion>
                    <li class="accordion-navigation">
                      <a href="#panel1a">What is a play group?</a>
                      <div id="panel1a" class="content active">
                        Play groups reflect the attitude we take with Consciousness. Being playful allows us to re-encode the seriousness life can present us. A lot of adults have lost the dynamic of play as a way of life. Many never had it to begin with. Play allows for fun, creativity, questions and open limits. Heart-centered play is all about how easy it is to be present. Allowing for flow, not work, is essential. We strive to draw from heart-centered play in our daily lives. I deliberately use the word play.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel2a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What is a practice group?</a>
                      <div id="panel2a" class="content">
                        Practice groups are just that, practice. The morphic field resonance of practice is rarely associated with fun. I don’t know many people who like to practice. Studies show that top athletes like professional soccer players don’t need constant practice to stay in shape. We work too hard often. We look to justify our behaviors of play and take all the fun out.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel3a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What is a study group?</a>
                      <div id="panel3a" class="content">
                        I lead an official Matrix Energetics (ME) study group. This group is open only to ME students who have attended an official Matrix Energetics seminar. Here we use the principles of ME, and all the wonderful shortcuts that it encompasses, to explore ourselves from within this mindset.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel4a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What are fuzzy photons?</a>
                        <div id="panel4a" class="content">
                          <p>The term fuzzy photons refers to how physicists understand the particles of light, or photons, that make up everything in our world, and how they move in a cloud. Photons are always in motion, quivering - hence the fuzzy. Photons also move into and out of patterns. Only when one of these patterns is observed does it settle into physical reality.</p>
                          <p>That’s what we bring to the mix: the Observer Effect. We can use the observer effect to shift our reality by asking questions and allowing things to be different. The questions reintroduce potential, dissolve the observed pattern, shift the fuzzy photons around until we observe, feel, sense a new reality taking shape.</p>
                        </div>
                    </li>
                  </ul>

                    <!-- end accordion --> 
            
<!-- bottom of html page -->
   <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation/foundation.accordion.js"></script> 
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.joyride.js"></script>
        <script>
      $(document).foundation();
    </script>
    <script>
      
      $(document).foundation({
        accordion: {
          // specify the class used for accordion panels
          content_class: 'content',
          // specify the class used for active (or open) accordion panels
          active_class: 'active',
          // allow multiple accordion panels to be active at the same time
          multi_expand: false,
          // allow accordion panels to be closed by clicking on their headers
          // setting to false only closes accordion panels when another is opened
          toggleable: true
        }
      });
    </script>
    <script>
      $(document).foundation({
		accordion: {
		  callback : function (accordion) {
			console.log(accordion);
      }
    }
  });
</script>
</body>
         

accordioncsshtmlscripticons

Version: Foundation 5.4.7 using CSS and basic accordion code sample
http://www.janetandbeyond.com/test-site/classes.html
http://www.janetandbeyond.com/test-site/css/foundation-icons.css
http://www.janetandbeyond.com/test-site/css/custom.css

I'm seeking help getting the basic accordion to open/close. When the .active li is clicked, it behaves like a bookmark (note it in URL in address bar) by scrolling the page down rather than closing the accordion section. No sections open or close onclick. The script calls are at the bottom of the html page. No idea whether they are done correctly.

I'm also unsure about how to display the +/- icons. I tried adding the accordion arrow style declarations first to the custom.css file and next to the foundation.fonts.css. Neither worked.

I'm still learning my way around Foundation 5 and need some pointers.

Thanks in advance folks!

      <!-- begin accordion -->

                   <ul class="accordion active" data-accordion>
                    <li class="accordion-navigation">
                      <a href="#panel1a">What is a play group?</a>
                      <div id="panel1a" class="content active">
                        Play groups reflect the attitude we take with Consciousness. Being playful allows us to re-encode the seriousness life can present us. A lot of adults have lost the dynamic of play as a way of life. Many never had it to begin with. Play allows for fun, creativity, questions and open limits. Heart-centered play is all about how easy it is to be present. Allowing for flow, not work, is essential. We strive to draw from heart-centered play in our daily lives. I deliberately use the word play.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel2a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What is a practice group?</a>
                      <div id="panel2a" class="content">
                        Practice groups are just that, practice. The morphic field resonance of practice is rarely associated with fun. I don’t know many people who like to practice. Studies show that top athletes like professional soccer players don’t need constant practice to stay in shape. We work too hard often. We look to justify our behaviors of play and take all the fun out.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel3a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What is a study group?</a>
                      <div id="panel3a" class="content">
                        I lead an official Matrix Energetics (ME) study group. This group is open only to ME students who have attended an official Matrix Energetics seminar. Here we use the principles of ME, and all the wonderful shortcuts that it encompasses, to explore ourselves from within this mindset.
                      </div>
                    </li>
                    <li class="accordion-navigation">
                      <a href="#panel4a"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>What are fuzzy photons?</a>
                        <div id="panel4a" class="content">
                          <p>The term fuzzy photons refers to how physicists understand the particles of light, or photons, that make up everything in our world, and how they move in a cloud. Photons are always in motion, quivering - hence the fuzzy. Photons also move into and out of patterns. Only when one of these patterns is observed does it settle into physical reality.</p>
                          <p>That’s what we bring to the mix: the Observer Effect. We can use the observer effect to shift our reality by asking questions and allowing things to be different. The questions reintroduce potential, dissolve the observed pattern, shift the fuzzy photons around until we observe, feel, sense a new reality taking shape.</p>
                        </div>
                    </li>
                  </ul>

                    <!-- end accordion --> 
            
<!-- bottom of html page -->
   <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation/foundation.accordion.js"></script> 
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.joyride.js"></script>
        <script>
      $(document).foundation();
    </script>
    <script>
      
      $(document).foundation({
        accordion: {
          // specify the class used for accordion panels
          content_class: 'content',
          // specify the class used for active (or open) accordion panels
          active_class: 'active',
          // allow multiple accordion panels to be active at the same time
          multi_expand: false,
          // allow accordion panels to be closed by clicking on their headers
          // setting to false only closes accordion panels when another is opened
          toggleable: true
        }
      });
    </script>
    <script>
      $(document).foundation({
		accordion: {
		  callback : function (accordion) {
			console.log(accordion);
      }
    }
  });
</script>
</body>
         
Rafi Benkual almost 5 years ago

This script contains all foundation JS so you dont need to load the plugins individually.
Javascript
<script src="js/foundation.min.js"></script>

Also you are calling foundation multiple times at the bottom. It would be more efficient to run the callback in the other accordion function (combine them)

This is likely the reason. In console: Uncaught ReferenceError: Foundation is not defined

If you clean up some of that, it should work: http://codepen.io/rafibomb/pen/EavvQK

Jacqueline Sowell almost 5 years ago

I did some much-needed clean up as you suggested. The accordion still doesn't open/close. What else shall I check?

http://janetandbeyond.com/test-site/classes.html

Julie Lewis over 4 years ago

Does it say in the docs anywhere exactly what is, and is not, included in foundation.min.js?

Rafi Benkual over 4 years ago

Yes, in the JS section. Foundation.min.js is all the Foundation JS plugins. On the sidebar of the docs, anything labeled JS is one of those plugins.

http://foundation.zurb.com/docs/javascript.html

Also, Jaquelines issue is resolved.