135 строки
5.2 KiB
HTML
135 строки
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1: Accordion - Icons</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="iconAccordion" class="control_frame">
|
|
<h3>
|
|
<span class="logos volkswagan"></span>
|
|
<a href="#">Volkswagen</a>
|
|
</h3>
|
|
<div>
|
|
Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany.
|
|
Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.
|
|
</div>
|
|
<h3>
|
|
<span class="logos mitsubishi"></span>
|
|
<a href="#">Mitsubishi</a>
|
|
</h3>
|
|
<div>
|
|
The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand,
|
|
trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.
|
|
</div>
|
|
<h3>
|
|
<span class="logos benz"></span>
|
|
<a href="#">Mercedes-Benz</a>
|
|
</h3>
|
|
<div>
|
|
Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks.
|
|
Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins
|
|
to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" class="jsScript">
|
|
$(function () {
|
|
// declaration
|
|
$("#iconAccordion").ejAccordion({
|
|
customIcon: {
|
|
header: "header-close",
|
|
selectedHeader: "header-expand"
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
<style class="cssStyles">
|
|
#iconAccordion img {
|
|
float: left;
|
|
margin: -7px 1px 0 -13px;
|
|
}
|
|
|
|
.header-expand {
|
|
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
|
background-position: -187px -60px;
|
|
cursor: pointer;
|
|
display: block;
|
|
float: right !important;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.header-close {
|
|
background-image: url(../content/images/ui-icons/ui-icons-default.png);
|
|
background-position: -161px -60px;
|
|
cursor: pointer;
|
|
display: block;
|
|
float: right !important;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.e-acrdn-header:hover .header-expand {
|
|
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
|
background-position: -187px -60px;
|
|
}
|
|
|
|
.e-acrdn-header:hover .header-close {
|
|
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
|
background-position: -161px -60px;
|
|
}
|
|
|
|
.logos {
|
|
float: left;
|
|
height: 35px;
|
|
margin: -6px 1px 2px -15px;
|
|
width: 35px;
|
|
}
|
|
|
|
#iconAccordion .e-select .logos {
|
|
background-image: url(../content/images/accordion/grey_logos.png);
|
|
}
|
|
|
|
#iconAccordion .e-active .logos {
|
|
background-image: url(../content/images/accordion/white_logos.png);
|
|
}
|
|
|
|
#iconAccordion .e-select:hover div {
|
|
background-image: url(../content/images/accordion/white_logos.png) !important;
|
|
}
|
|
|
|
.logos.volkswagan {
|
|
background-position: 0 -170px;
|
|
}
|
|
|
|
.logos.mitsubishi {
|
|
background-position: 0 -85px;
|
|
}
|
|
|
|
.logos.benz {
|
|
background-position: 0 0;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|