<!DOCTYPE html>
<html>
<head>
<title>Dobozok</title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<link href="dobozok.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="doboz" id="doboz1">
<div class="dobozfej" id="fej1">
<img src="block-close.gif" class="kep" id="kep1" title="nem működik" />
<span class="cim">Első doboz címe</span>
</div>
<div class="doboztorzs" id="torzs1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis dui vitae enim congue porta. Etiam vitae mi enim. Vestibulum eget sapien ut tellus interdum fermentum. Morbi vestibulum consequat libero, ac porttitor nisl dapibus nec. Sed vulputate ipsum quis felis pulvinar eget scelerisque tortor consectetur. Duis augue ipsum, volutpat sed tristique a, placerat at ante. Donec quis arcu a nunc pharetra porttitor sed at augue. Sed euismod pellentesque elit. Mauris metus dolor, commodo quis adipiscing at, faucibus id odio. Aliquam congue justo quis risus volutpat facilisis eget ac nunc. Aliquam luctus elementum arcu, eget venenatis sapien ultricies eget. Nunc lobortis, magna et lobortis elementum, sapien turpis adipiscing nibh, sit amet varius odio odio quis nunc. Proin eget orci in felis eleifend malesuada vel nec elit.
</div>
</div>
<div class="doboz" id="doboz2">
<div class="dobozfej" id="fej2">
<img src="block-close.gif" class="kep" id="kep2" title="nem működik" />
<span class="cim">Második doboz címe</span>
</div>
<div class="doboztorzs" id="torzs2">
Phasellus quis tristique nisl. Donec nisl arcu, venenatis eget luctus et, semper vel turpis. Curabitur vitae eros risus. Donec vitae tellus nisi, a rhoncus tortor. Sed placerat, nunc eget lobortis rutrum, sapien dolor tincidunt purus, eu accumsan sapien magna a enim. Suspendisse convallis dignissim mollis. Mauris bibendum, erat at rutrum blandit, est diam rutrum mauris, vel ullamcorper mi justo eget purus. Nunc ac vehicula augue. Morbi porttitor orci eget urna placerat in ultrices nisi molestie. Aliquam erat volutpat.
</div>
</div>
<script type="text/javascript">
$(".doboztorzs").css("display", "none");
$(".kep").attr("src", "block-open.gif").attr("title", "részletek megjelenítése").css("cursor", "pointer");
$(".kep").click(function(){
var id = $(this).attr("id");
var ssz = id.substr(3);
if ($("#torzs" + ssz).css("display") == "none") {
$("#torzs" + ssz).css("display", "block");
$("#kep" + ssz).attr("src", "block-close.gif").attr("title", "részletek elrejtése");
} else {
$("#torzs" + ssz).css("display", "none");
$("#kep" + ssz).attr("src", "block-open.gif").attr("title", "részletek megjelenítése");
}
});
</script>
</body>
</html>
