如何將第二個div併入第一個div以便可見並摺疊，然後按箭頭按鈕

Question

我正在嘗試實現可能爲您提供的一項簡單任務。

我正在一個WebForms項目中工作。我很喜歡它，我首先學習了MVC。我有一個更新面板（「Tareas」部分），裏面有幾個div。這個面板的功能是保存一些數據。接下來，我有另一個div（「Documentos」部分）。這個div的功能是保存附件。現在的問題是，現在我只是在另一個div下面有一個div，並且在視覺上它似乎是兩個分開的東西。它看起來像這樣：

什麼客戶真正想要的是部分有「documentos」是「Tareas」段中的可潰縮段。第二部分（第二格）應按箭頭按鈕打開和關閉。它應該是這樣的：

我怎樣才能做到這一點？

謝謝！

Answer 1

檢查此實施。我沒有顯示主要內容。它只會在你點擊箭頭的時候出現，並且會用jQuery切換。希望這可以幫助。 JSFiddle

$(".arrowDown").click(function(){ 
 
    $(".arrowDown").toggleClass("animate"); 
 
\t $(".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>