• CSS Framework for restaurant sites

Getting Started

Download Content Typography Cards Images Navigation Carousel Sidebar Button Accordion Grid Forms Tabs Gallery Tables Menu Grid Media Queries Help classes

Accordion

Vertical Slide Accordion

HSM framework has included a beautiful accordian feature for your restaurant site. It by default has a smooth animation.
- To use Accordion you need to wrap .accordion-container <div> around ul tag.
- Give <ul> tag .accordion class.
- Each li tag will have main content. The .accordionHeader class gives special styling to the header.
- Inside li tag you can use any block level tag with .accordionContent class. Here you can add any content, images, grid etc.

  • Breakfast

    Breakfast specials- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque illo incidunt earum sunt sint excepturi consectetur impedit dolorum iste est vel nesciunt, nobis quae laborum, rem facilis hic. Tenetur, rem!

  • Lunch

    Lunch specials - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque illo incidunt earum sunt sint excepturi consectetur impedit dolorum iste est vel nesciunt, nobis quae laborum, rem facilis hic. Tenetur, rem!

  • Brunch

    Brunch specials - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque illo incidunt earum sunt sint excepturi consectetur impedit dolorum iste est vel nesciunt, nobis quae laborum, rem facilis hic. Tenetur, rem!

  • Dinner

    Dinner specials - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque illo incidunt earum sunt sint excepturi consectetur impedit dolorum iste est vel nesciunt, nobis quae laborum, rem facilis hic. Tenetur, rem!

  • Drinks

    Drinks specials - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque illo incidunt earum sunt sint excepturi consectetur impedit dolorum iste est vel nesciunt, nobis quae laborum, rem facilis hic. Tenetur, rem!

HTML Structure

<div class="accordion-container">
  <ul class="accordion">
   <li>
     <h3 class="accordionHeader">Breakfast</h3>
     <p class="accordionContent">Breakfast specials- ...!</p>
   </li>
   <li>
	 <h3 class="accordionHeader">Lunch</h3>
     <p class="accordionContent">Lunch specials - ...</p>
   </li>
   <li>
     <h3 class="accordionHeader">Brunch</h3>
     <p class="accordionContent">Brunch specials - ...!</p>
   </li>
   <li>
      <h3 class="accordionHeader">Dinner</h3>
      <p class="accordionContent">Dinner specials - ...</p>
   </li>
   <li>
     <h3 class="accordionHeader">Drinks</h3>
     <p class="accordionContent">Drinks specials - ...</p>
  </li>
  </ul>
</div>