Accordion

We have added an accordion content block on some of the template's sample catalog pages. This allows for content to be displayed in a relatively small space. Each section will expand when you click on it and will contract when you click on it again. This accordion block uses a Definition List <dl> that is styled with a bit of css. If you do not know what a definition list is, you can learn about it in our CSS Basics Section here.

When editing the page in Design View, the content will appear expanded for easy editing.

How to Order

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola.

Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna.

Refunds

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna.

Shipping

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola.

  1. semper manet sola
  2. semper manet sola
  3. semper manet sola
  4. semper manet sola
html
  1. <dl id="acc"> <!-- begins definition list -->
  2. <dt>First Topic</dt> <!-- first topic -->
  3. <dd> <!-- begins expandable area -->
  4. <p>Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore
    magna. Wisi e nim admin im veniam, quis nostrud.</p>
  5. <p>Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper
    manet sola.</p>
  6. </dd> <!-- ends expandable area -->
  7. <dt>Second Topic</dt> <!-- next topic -->
  8. <dd><p>content goes here.</p></dd>
  9. ...add more items...
  10. </dl> <!-- ends definition list -->

But the accordion script is flexible and can be used for other things like FAQs:

How do I...?

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola.

Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna.

When do I...?

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna.

Another Question...?

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola.

Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna.