Kindret,
Варианты на тему открыть закрыть див, открыть другой див закрыть прежний, закрыть все при клике во вне
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
body{
background-color: #D2B48C;
}
</style>
<script>
$(window).load(function(){
var container = $("#tabs");
container.tabs({collapsible: true , active: false});
$(document).mouseup(function (e) {
if (container.has(e.target).length === 0){
container.find('.ui-state-active span').trigger('click');
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#fragment-1"><span>One</span></a>
</li>
<li>
<a href="#fragment-2"><span>Two</span></a>
</li>
<li>
<a href="#fragment-3"><span>Three</span></a>
</li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre>
<code>$( "#tabs" ).tabs(); </code>
</pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
body{
background-color: #D2B48C;
}
</style>
<script>
$(window).load(function(){
var container = $(".accordion");
container.accordion({
header: "> h3",
active: false,
collapsible: true,
heightStyle: "content",
event: "click hoverintent"
})
$(document).mouseup(function (e) {
if (container.has(e.target).length === 0){
container.find('.ui-state-active').trigger('click');
}
});
});
</script>
</head>
<body>
<div class="accordion">
<h3>Section 1</h3>
<div>
<div class="accordion">
<h3>Inner Section 1</h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
<h3>Inner Section 2</h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
</div>
</div>
<h3>Section 2</h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
</div>
</body>
</html>
