-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFlat-Design-Horizontal.html
75 lines (68 loc) · 4.46 KB
/
Flat-Design-Horizontal.html
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<title>Tab-2-Accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--Theme Design-->
<link rel="stylesheet" href="style/css/Themes/Flat-Design-Horizontal/color-scheme.css">
<link rel="stylesheet" href="style/css/Themes/Flat-Design-Horizontal/style.css">
</head>
<body>
<h3 class="tab-2-accordion">Tab-2-Accordion</h3>
<div class="tab_accord_wrapper flat_theme">
<!--Tab options-->
<ul class="tabs">
<li class="active" rel="tab1">First Tab</li>
<li rel="tab2">Second Tab</li>
<li rel="tab3">Third Tab</li>
</ul>
<!--Tab options End-->
<!--Tab Content Panel-->
<div class="tab_container">
<!--Overview Tab Content-->
<div class="tab_drawer_heading_wrapper">
<h3 class="d_active tab_drawer_heading" rel="tab1">First Tab
<!--<span class="fa fa-chevron-down"></span>-->
<i class="fa fa-plus"></i>
</h3>
</div>
<div id="tab1" class="tab_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec mauris velit. Proin elementum gravida enim ac finibus. Praesent ut imperdiet augue. Vestibulum nulla nibh, auctor ut pharetra ornare, lacinia ut dui. Mauris luctus semper justo quis vestibulum. Vivamus dictum pellentesque felis, ac congue est feugiat at. Aliquam dignissim feugiat ligula sit amet facilisis. Aliquam eu ipsum ac velit semper ultricies id a leo. In commodo purus nunc, vitae maximus purus sagittis in. Quisque velit nibh, consectetur id efficitur quis, facilisis sed metus. Sed non mi in nunc suscipit facilisis sed et lacus. Proin et gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec volutpat tellus ut quam blandit, vulputate pellentesque sem scelerisque.
</p>
</div>
<!--Overview Tab Content End-->
<!--Facilities Tab Content-->
<div class="tab_drawer_heading_wrapper">
<h3 class="tab_drawer_heading" rel="tab2">Second Tab
<i class="fa fa-plus"></i>
</h3>
</div>
<div id="tab2" class="tab_content">
<p>Vivamus semper viverra tempus. Sed pellentesque nibh eros, ut volutpat augue vulputate eget. Fusce ac lacus tristique ante pulvinar viverra quis vitae ex. Mauris finibus est vitae mi viverra facilisis. Duis sit amet pharetra enim, eget mattis mauris. Curabitur semper eros ligula, cursus porttitor nulla suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc commodo eu purus sit amet lacinia. Curabitur vitae nibh nec arcu tincidunt placerat id vitae tortor. Duis condimentum sapien lacus. Aenean imperdiet ex id massa consequat posuere. Morbi volutpat sapien at porta pharetra. Integer posuere augue lorem, sed ultricies enim malesuada id. Suspendisse rhoncus sapien elit.</p>
</div>
<!--Facilities Tab Content End-->
<!--Package & Menu Tab Content-->
<div class="tab_drawer_heading_wrapper">
<h3 class="tab_drawer_heading" rel="tab3">Third Tab
<i class="fa fa-plus"></i>
</h3>
</div>
<div id="tab3" class="tab_content">
<p>
Phasellus posuere hendrerit ante et convallis. Vivamus sollicitudin pharetra enim, eget posuere quam molestie ut. In sed urna at nisi ullamcorper rutrum eget ut felis. Morbi et lorem mauris. In hac habitasse platea dictumst. Suspendisse vitae lorem vehicula, sollicitudin velit at, ornare dui. Proin lacinia consectetur purus quis finibus. Aliquam quis eros ut risus convallis dictum vitae a purus. Donec eget quam lacus. Sed et laoreet purus. Morbi pretium eros eget nunc ultricies iaculis. Quisque auctor, quam vitae vehicula feugiat, eros leo sollicitudin quam, non consequat purus nulla eget dui. Suspendisse blandit urna nunc, a euismod tellus pretium non. Phasellus blandit lectus non nulla eleifend, ultrices sollicitudin risus rhoncus. Morbi rutrum ornare neque nec ornare.
</p>
</div>
<!--Package & Menu Tab Content End-->
</div>
<!--Tab Content Panel End-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
$(".tab_accord_wrapper").tab2accordion();
</script>
</body>
</html>