Menu icon Foundation

My Posts





My Comments

Timothy Griffin commented on Paolo Euvrard's post over 4 years

Working great. Thank you. I knew I had an error in my code , just could not see it

Timothy Griffin commented on Paolo Euvrard's post over 4 years

I have also been struggling with the accordion function. I have copied the code straight from your example and the Foundation site. Nothing works for me. I know I have a small little simple mistake in my code. any assistance is always apprecieated.

thank you

<html class="no-js" lang="en">
  <head>
  <meta  CONTENT="NO-CACHE"/>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Certificate Programs</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link href="customized_found.css" rel="stylesheet" type="text/css">
  <script src="js/vendor/modernizr.js"></script>
  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.equalizer.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();

  $(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'overlap', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});
  </script>
  <!--




-->
  </style>
  </head>

  <body>

<!--mast head code  -->
<div class="row">


    <ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</ul

  ></div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/foundation/foundation.accordion.js"></script> 
<script>
      $(document).foundation();
    </script>
</body>

</html>

Timothy Griffin commented on Timothy Griffin's post almost 5 years

I continue to have problems getting the accordion to work on my page. I created a page with just the sample code for the accordion and it will not open at all. I looked in the console and see no errors. Any guidiance on where to look is appreciated.

code from test page:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta  CONTENT="NO-CACHE"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link href="customized_found.css" rel="stylesheet" type="text/css">
<link href="customized_found.css" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
</head>
<body>

<!--Begin page content -->
<div class = "row">
<div class = "large-12 columns panel">
  <ul class="small-block-grid-1 medium-block-grid-3">
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel1c">Accordion 1</a>
          <div id="panel1c" class="content"> Panel 1. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel2c">Accordion 2</a>
          <div id="panel2c" class="content"> Panel 2. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel3c">Accordion 3</a>
          <div id="panel3c" class="content"> Panel 3. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel4c">Accordion 4</a>
          <div id="panel4c" class="content"> Panel 4. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel5c">Accordion 5</a>
          <div id="panel5c" class="content"> Panel 5. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel6c">Accordion 6</a>
          <div id="panel6c" class="content"> Panel 6. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
  </ul>
  <!--end page content--> 

</div>
</div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.accordion.js"></script> 
<script>
      $(document).foundation();
    </script>
</body>
</html>

Timothy Griffin commented on Timothy Griffin's post almost 5 years

thank you. I appears I had the above in the incorrect location.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Paolo Euvrard's post over 4 years

Working great. Thank you. I knew I had an error in my code , just could not see it

You commented on Paolo Euvrard's post over 4 years

I have also been struggling with the accordion function. I have copied the code straight from your example and the Foundation site. Nothing works for me. I know I have a small little simple mistake in my code. any assistance is always apprecieated.

thank you

<html class="no-js" lang="en">
  <head>
  <meta  CONTENT="NO-CACHE"/>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Certificate Programs</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link href="customized_found.css" rel="stylesheet" type="text/css">
  <script src="js/vendor/modernizr.js"></script>
  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.equalizer.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();

  $(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'overlap', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});
  </script>
  <!--




-->
  </style>
  </head>

  <body>

<!--mast head code  -->
<div class="row">


    <ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</ul

  ></div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/foundation/foundation.accordion.js"></script> 
<script>
      $(document).foundation();
    </script>
</body>

</html>

You commented on Timothy Griffin's post almost 5 years

I continue to have problems getting the accordion to work on my page. I created a page with just the sample code for the accordion and it will not open at all. I looked in the console and see no errors. Any guidiance on where to look is appreciated.

code from test page:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta  CONTENT="NO-CACHE"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link href="customized_found.css" rel="stylesheet" type="text/css">
<link href="customized_found.css" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
</head>
<body>

<!--Begin page content -->
<div class = "row">
<div class = "large-12 columns panel">
  <ul class="small-block-grid-1 medium-block-grid-3">
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel1c">Accordion 1</a>
          <div id="panel1c" class="content"> Panel 1. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel2c">Accordion 2</a>
          <div id="panel2c" class="content"> Panel 2. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel3c">Accordion 3</a>
          <div id="panel3c" class="content"> Panel 3. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel4c">Accordion 4</a>
          <div id="panel4c" class="content"> Panel 4. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel5c">Accordion 5</a>
          <div id="panel5c" class="content"> Panel 5. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel6c">Accordion 6</a>
          <div id="panel6c" class="content"> Panel 6. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
  </ul>
  <!--end page content--> 

</div>
</div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.accordion.js"></script> 
<script>
      $(document).foundation();
    </script>
</body>
</html>

You commented on Timothy Griffin's post almost 5 years

thank you. I appears I had the above in the incorrect location.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content