Actions

Difference between revisions of "Test"

From ThornsWiki

Line 92: Line 92:
 
}}
 
}}
  
<div class="timeline">
 
  
  <div class="timeline-item">
+
===TEST ACCORDION===
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2008</h2>
 
      <p>The ZURB Style Guide is created to help us speed up our work. It’s a handy collection of HTML, CSS and Javascript that we use on every client project. The ideas of ZURB Style Guide evolve over the years and form the basis for a new framework, Foundation.</p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2010</h2>
 
      <p>ZURB style guide was solidified and named Foundation. It is being used internally on all client projects and ZURB sites and apps.</p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2011</h2>
 
      <p>
 
        Foundation 2.0 is released to the public as an open source project! Foundation is the first responsive front-end framework and helps lead the charge for RWD across the web.
 
      </p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2012</h2>
 
      <p>
 
        Foundation 3.0 is released! This version comes with Sass and is the first framework to use mixins and Sass partials.
 
      </p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">february</span></p>
 
      <p>This year saw not one, but three releases to Foundation! Version 4 went mobile first, added many new components, and came with a visual update. Our responsive image plugin called Interchange was added to Foundation to make sites built with it load even faster.</p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
 
      <p>Foundation 5 is all about speed. It made learning, using and developing with the framework faster than ever! More new components like Equalizer, Off-canvas, and Icon-bar make a more complete package. Our responsive content plugin, Interchange can now swap in HTML content and images based on screen size.</p>
 
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
  
    </div>
+
<div class="accordion">
    <div class="timeline-content">
+
  <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-1">
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
+
  <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-2">
      <p>="http://foundation.zurb.com/emails.html" target="_blank">Foundation for Emails (formerly Ink), our responsive email framework is launched at the end of the year and helps designers easily create beautiful, responsive emails.</p>
+
  <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-3">
    </div>
 
  </div>
 
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
  
 +
  <div class="accordion__item">
 +
    <div class="accordion__header">
 +
      <label class="accordion__opener accordion__opener--open" for="accordion-1-item-1">Open</label>
 +
      <label class="accordion__opener accordion__opener--close" for="accordion-1-item-1">Close</label>
 +
      <div class="accordion__title">Section 1</div>
 
     </div>
 
     </div>
     <div class="timeline-content right">
+
     <div class="accordion__content">
       <p class="timeline-content-date">2014 - <span class="timeline-content-month">november</span></p>
+
       <p>...</p>
      <p>We launched .com/article/1362/foundation-for-apps-is-here" target="_blank">Foundation for Apps, the first front-end framework created for developing fully responsive web apps.</p>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
  
   <div class="timeline-item">
+
   <div class="accordion__item">
     <div class="timeline-icon">
+
     <div class="accordion__header">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
+
      <label class="accordion__opener accordion__opener--open" for="accordion-1-item-2">Open</label>
 
+
      <label class="accordion__opener accordion__opener--close" for="accordion-1-item-2">Close</label>
 +
    <div class="accordion__title">Section 2</div>
 
     </div>
 
     </div>
     <div class="timeline-content">
+
     <div class="accordion__content">
       <p class="timeline-content-date">2015</h2>
+
       <p>...</p>
      <p>.com/article/1416/foundation-6-is-here" target="_blank">Foundation for Sites 6 is released. Faster, lighter, more versatile, more flexible and more powerful than ever before to get your projects from Prototype to Production.</p>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
  
   <div class="timeline-item">
+
   <div class="accordion__item">
     <div class="timeline-icon">
+
     <div class="accordion__header">
  <i class="fa fa-user-circle-o" aria-hidden="true"></i>
+
      <label class="accordion__opener accordion__opener--open" for="accordion-1-item-3">Open</label>
 
+
      <label class="accordion__opener accordion__opener--close" for="accordion-1-item-3">Close</label>
 +
      <div class="accordion__title">Section 3</div>
 
     </div>
 
     </div>
    <div class="timeline-content right">
+
    <div class="accordion__content">
       <p class="timeline-content-date">2016</h2>
+
       <p>...</p>
      <p>.com/article/1432/foundation-for-emails-2-is-here" target="_blank">Foundation for Emails 2 is launched, revolutionizing email development through a workflow that uses the latest web technologies.</p>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 
</div>
 
</div>
 
 
 
__NOTOC__
 
__NOTOC__

Revision as of 22:19, 13 January 2019



TEST ACCORDION

 <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-1">
 <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-2">
 <input name="accordion-1" class="accordion__input" type="checkbox" id="accordion-1-item-3">
     <label class="accordion__opener accordion__opener--open" for="accordion-1-item-1">Open</label>
     <label class="accordion__opener accordion__opener--close" for="accordion-1-item-1">Close</label>
Section 1

...

     <label class="accordion__opener accordion__opener--open" for="accordion-1-item-2">Open</label>
     <label class="accordion__opener accordion__opener--close" for="accordion-1-item-2">Close</label>
Section 2

...

     <label class="accordion__opener accordion__opener--open" for="accordion-1-item-3">Open</label>
     <label class="accordion__opener accordion__opener--close" for="accordion-1-item-3">Close</label>
Section 3

...