如何按箭头按钮将第二个 div 合并到第一个 div 中以使其可见和折叠

Question

我正在努力为你们完成一项简单的任务。

我在一个 WebForms 项目中工作。我是个菜鸟，我首先学习了 MVC。我有一个更新面板（“Tareas”部分），里面有几个 div。这个面板的作用是保存一些数据。接下来，我有另一个 div（“Documentos”部分）。这个div的作用是保存一个附件。问题是，现在，我在另一个 div 下只有一个 div，在视觉上它似乎是两个分开的东西。它看起来像这样：

客户真正想要的是让“documentos”部分成为“Tareas”部分中的可折叠部分。第二部分（第二个 div）应按箭头按钮打开和关闭。它应该是这样的：

我怎样才能做到这一点？

提前谢谢你！！！

Answer 1

检查此实现。我没有显示主要内容。只有当你点击箭头时它才会出现，它会用 jQuery 切换它。希望这可以帮助。 JSFiddle

$(".arrowDown").click(function(){
  $(".arrowDown").toggleClass("animate");
	$(".content").slideToggle();
});

.box{
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.box .arrowDown{
  margin-right: 10%;
  font-size: 4em;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.arrowUp{
  text-align: right;
  font-size: 4em;
  margin-right: 10%;
  cursor:pointer;
}

.animate{
  transform: rotate(180deg);
}

.content{
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div id="documentos">DOCUMENTOS</div>
  <div id="documentos2">0 DOCUMENTOS</div>
  <div class="arrowDown">&darr; </div>
</div>

<div class="content">
  <h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, aut non! Perspiciatis quisquam rerum placeat odit, aut sed culpa quibusdam ipsam quo! Explicabo facilis aperiam dolores praesentium culpa, blanditiis officiis.</h1>
  </div>