PDA

View Full Version : ایجاد collaps افقی



sitara24
شنبه 05 اسفند 1391, 19:31 عصر
من میخوام سمت جپ سایتم یه ستون جمع شونده داشته باشم.هر جی تو سایتا سرچ کردم مدل عمودیش بود.میشه راهنمایی کنین که باید چیکار کنم که افقی بشه؟با jquery
اینم کدم
h2.expand_heading {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(expand_collapse.png) no-repeat;
height: 38px;
line-height: 38px;
width: 227px;
font-size: 2em;
font-weight: normal;
float: left;
}

h2.expand_heading a {
color: #fff;
text-decoration: none;
display: block;
}
h2.expand_heading a:hover {
color: #ccc;
}

h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #ffffff;
overflow: hidden;
font-size: 1.2em;
width: 300px;
clear: both;
}
.toggle_container .box {
padding: 20px;
}
.toggle_container .box p {
padding: 5px 0;
margin: 5px 0;
}

.toggle_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}

.expanded
{
background-position:bottom left;
}

<div class="wrapper" >
<div class="expand_top" >
</div>
<div class="expand_wrapper" style="float: left; width: 300px">
<h2 class="expand_heading">
<a href="#">Wordpress ThemDevelopment</a></h2>
<div class="toggle_container" style="margin-left: 300px">
<div class="box">
<h3>
Wordpress Theme Development</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".toggle_container").hide();
$("h2.expand_heading").toggle(function () {
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.expand_heading").click(function () {
$(this).next(".toggle_container").slideToggle("slow");
});

$(".expand_all").click(function () {
$(".toggle_container").slideToggle("slow");
});
});
</script>