116 строки
5.4 KiB
HTML
116 строки
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1: Accordion - Default Functionalities</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="basicAccordion" class="control_frame">
|
|
<h3>
|
|
<a href="#">Inbox</a>
|
|
</h3>
|
|
<div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/3.png" alt="employee" />
|
|
<div class="time-panel">7:30</div>
|
|
<b class="headername">Catriona</b><br />
|
|
All WinRT controls are optimized for touch, supporting common gestures: zooming, panning, selecting, double-tapping, rotating, resizing.
|
|
</div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/6.png" alt="employee" />
|
|
<div class="time-panel">5:33</div>
|
|
<b class="headername">John Linden</b><br />
|
|
All the components in the ASP.NET MVC have been built from the ground up with performance in mind and are extremely lightweight.
|
|
</div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/8.png" alt="employee" />
|
|
<div class="time-panel">2:10</div>
|
|
<b class="headername">Louis</b><br />
|
|
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
|
</div>
|
|
</div>
|
|
<h3>
|
|
<a href="#">Sent</a>
|
|
</h3>
|
|
<div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/8.png" alt="employee" />
|
|
<div class="time-panel">3:55</div>
|
|
<b class="headername">Louis</b><br />
|
|
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
|
</div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/6.png" alt="employee" />
|
|
<div class="time-panel">6:47</div>
|
|
<b class="headername">John Linden</b><br />
|
|
Cloud computing, also known as 'on-demand computing', is a kind of Internet-based computing, where shared resources, data and information are provided to computers and other devices on-demand.
|
|
</div>
|
|
</div>
|
|
<h3>
|
|
<a href="#">Trash</a>
|
|
</h3>
|
|
<div>
|
|
<div class="emp-list">
|
|
<img src="../content/images/Employees/3.png" alt="employee" />
|
|
<div class="time-panel">8:30</div>
|
|
<b class="headername">Catriona</b><br />
|
|
With our sophisticated support system, built from the ground up to support all type of customers, you will have a streamlined experience working with our support team.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" class="jsScript">
|
|
$(function () {
|
|
// declaration
|
|
$("#basicAccordion").ejAccordion();
|
|
});
|
|
</script>
|
|
<style class="cssStyles">
|
|
#basicAccordion img {
|
|
float: left;
|
|
height: 40px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.emp-list {
|
|
border-bottom: 1px solid #BBBCBB;
|
|
margin-bottom: 9px;
|
|
padding-bottom: 9px;
|
|
}
|
|
|
|
.emp-list:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.time-panel {
|
|
float: right;
|
|
color: #2382C3;
|
|
}
|
|
|
|
.headername {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|