framework7.angular/kitchen-sink-material/accordion.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="accordion" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Accordion</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block-title">List View Accordion</div>
    <div class="list-block accordion-list">
      <ul>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Lorem Ipsum</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Nested List</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="list-block">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Integer semper</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Inset Accordion</div>
    <div class="list-block accordion-list inset">
      <ul>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Lorem Ipsum</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Nested List</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="list-block">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Integer semper</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>