ios7css/list_with_left_toggle.html at master · yoka/ios7css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="dist/ios7css.css" type="text/css">
  <script src="js/track.js"></script>
</head>
<body>
  <ul class="list toggle">
    <li onclick="document.querySelector('.list').classList.toggle('toggle')">Click to show toggle<div class='chevron'></div></li>
    <li onclick="this.classList.toggle('toggled')">Toggle this<div class='chevron'></div></li>
    <li class="toggled">Always toggled<div class='chevron'></div></li>
    <li>Long text: 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 class='chevron'></div></li>
    <li>Another long text: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div class='chevron'></div></li>
    <li>List 6<div class='chevron'></div></li>
    <li>List 7<div class='chevron'></div></li>
    <li>List 8<div class='chevron'></div></li>
    <li>List 9<div class='chevron'></div></li>
    <li>List 10<div class='chevron'></div></li>
    <li>List 11<div class='chevron'></div></li>
    <li>List 12<div class='chevron'></div></li>
    <li>List 13<div class='chevron'></div></li>
    <li>List 14<div class='chevron'></div></li>
    <li>List 15<div class='chevron'></div></li>
    <li>List 16<div class='chevron'></div></li>
    <li>List 17<div class='chevron'></div></li>
    <li>List 18<div class='chevron'></div></li>
    <li>List 19<div class='chevron'></div></li>
  </ul>
</body>
</html>