显示数据后组合边框

Question

我正在尝试为标题和描述组合边框。标题显示在页面加载时，但是一旦单击标题，其描述将显示在其自己的边框下方。我希望这些边框在描述显示时结合起来。

我创建了一个snipet来显示我到目前为止所拥有的内容。

$('.service_wrapper').click(function() {
	  var thisDescription = $('.service_description', $(this));

	  // Hide all other descriptions
	  $('.service_description').not(thisDescription).hide();

	  // Toggle (show or hide) this description
	  thisDescription.toggle(500);
	});

.service_list {
	margin-left: 20%;
}	
.service_title {
	border: 1px solid black;
	padding: 8px;
	width: 20%;
	margin: 15px 0;
}
.service_title:hover {
	background-color: gray;
	color: blue;
	cursor: pointer;
}
.service_description { 
	display: none;
	border: 1px solid black;
	padding: 8px;
	width: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
	<div class="service_wrapper">
	  <div class="service_title">Floors</div>
	  <div class="service_description">The best floors!</div>
	</div>
	<div class="service_wrapper">
	  <div class="service_title">Roofs</div>
	  <div class="service_description">Your roof will be perfect!</div>
	</div>
	<div class="service_wrapper">
	  <div class="service_title">Siding</div>
	  <div class="service_description">mmmm siding.</div>
	</div>
	<div class="service_wrapper">
	  <div class="service_title">Paint</div>
	  <div class="service_description">Fabulous paint!</div>
	</div>
	<div class="service_wrapper">
	  <div class="service_title">Kitchen Remodels</div>
	  <div class="service_description">Pretty kitchen.</div>
	</div>
</div>

我试图让它做到这样的事情：

http://royalwoodfloor.com/services/

有谁知道我应该做什么？

图像

Answer 1

只需像这样改变你的CSS

   shapes[i].x+=dx;
   shapes[i].y+=dy;

这是示例链接the example link

更新了代码snipet

Answer 2

尝试这样的事情。略微改变了你的HTML结构和css。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
    <div class="service_wrapper">
  <div class="service_title"><span>Floors</span>
  <div class="service_description"><span>The best floors!</span></div>
    </div>
    </div>
</div>

CSS

.service_list {
    margin-left: 20%;
}   
.service_title {
    border: 1px solid black;

    width: 30%;

}
.service_title span{
  padding:8px 8px 8px 8px;
 display:inline-block;
}
.service_title:hover {
    background-color: gray;
    color: blue;
    cursor: pointer;
}
.service_description { 
    display: none;
    border-top: 1px solid black;
}
.service_description span{
  padding:10px

}

Answer 3

与动画转换不同，该示例修复了保证金问题：

somethingElseCompile

看到它正常工作here