javascript - 显示数据后合并边框

Question

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

我创建了一个片段来展示我目前拥有的内容。

$('.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

        .service_title {
            border: 1px solid black;
            padding: 8px;
            width: 20%;
            margin: 15px 0 0 0;/* update the margin */
        }

这是示例链接 the example link

更新了代码片段