jacks,
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<title>New Tickets: ReqList</title>
<meta charset="utf-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js" > </script>
<style>
ul.ul-dropfree div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:6px;
left:-6px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}
ul.li-tree{padding-left:2em}
ul.li-tree ul{margin:0;padding-left:2.5em;background-color:#FFF}
ul.li-tree li{list-style:none outside none;border-left:1px dotted #000;margin:0}
ul.li-tree div{border-bottom:1px dotted #000;position:absolute;width:1.5em;height:.75em}
ul.li-tree p{margin:0 0 0 1.75em;padding:.25em 0;background-color:#FFFFFF}
ul.li-tree li:last-child ul{position:relative;left:-1px}
ul.li-tree li:last-child{border-left:0 none}
ul.li-tree li:last-child > div{border-left:dotted 1px #000}
ul.ul-treefree{padding-left:25px}
ul.ul-treefree ul{margin:0;padding-left:6px}
ul.ul-treefree li{position:relative;list-style:none outside none;border-left:solid 1px #999;margin:0;padding:0 0 0 19px;line-height:23px}
ul.ul-treefree li:before{content:'';display:block;border-bottom:solid 1px #999;position:absolute;width:18px;height:11px;left:0;top:0}
ul.ul-treefree li:last-child{border-left:0 none}
ul.ul-treefree li:last-child:before{border-left:solid 1px #999}
ul.ul-dropfree div.drop{width:11px;height:11px;position:absolute;z-index:10;top:6px;left:-6px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}
ul.ul-tree{padding-left:2em;padding-bottom:12px}
ul.ul-tree ul{margin:0;padding-left:17px}
ul.ul-tree li{position:relative;list-style:none outside none;border-left:1px solid rgba(0,0,0,.5);margin:0;line-height:24px}
ul.ul-tree p{position:relative;top:12px;margin:0 0 0 2.5em;padding:0 0}
ul.ul-tree p:before{content:'';display:block;border-bottom:1px solid rgba(0,0,0,.5);position:absolute;width:2.5em;height:24px;left:-2.5em;top:-12px}
ul.ul-tree li:last-child{border-left:0 none}
ul.ul-tree li:last-child > p:before{border-left:solid 1px rgba(0,0,0,.5)}
ul.ul-drop div.drop{width:11px;height:11px;position:absolute;z-index:10;top:19px;left:12px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAYAAAB7/H1+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNrck8EOwCAIQ9vF///lTjdniIEMDrusB43xgQUiAAi3Mnua5bV24UXsqrCHecVeeLw8NpBGYiZhVthWcYG81KYL7eXb82wr12AYG3/Y5djOZAQ6M9IW/LMeu46DUlms7pufdwowAAbFQP9vY58OAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}
</style>
</head>
<body>
<script>
$( document ).ready(function() {
$(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
$(".ul-dropfree div.drop").click(function() {
if ($(this).nextAll("ul").css('display')=='none') {
$(this).nextAll("ul").slideDown(400);
$(this).css({'background-position':"-11px 0"});
} else {
$(this).nextAll("ul").slideUp(400);
$(this).css({'background-position':"0 0"});
}
});
$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
},
function() {
// Скрываем блок
$("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>
<script type="text/javascript">
function showOrHide(cb, cat) {
cb = document.getElementById(cb);
cat = document.getElementById(cat);
if (cb.checked) cat.style.display = "block";
else cat.style.display = "none";
}
</script>
<br> <a href='#' id='trigger'><b>Open reqlists</b></a>
<div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>
<ul class="ul-treefree ul-dropfree">
<li>Программирование
<ul>
<li>PHP<ul>
<li>111</li>
<input type = 'checkbox' id = 'dd' onchange='showOrHide("dd", "d3");'/>
<li>222</li>
<div id = 'd3' style = 'display: none;'>
<input type="radio" name="n" checked>1
<input type="radio" name="n">2
</div>
</ul>
</li>
<li>JavaScript</li>
<li>MySQL</li>
<li>htaccess</li>
<li>regular expression</li>
</ul>
</li>
</ul>
</div>
</body>
</html>