jquery - 如何将第二个 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>