javascript - HTML Accordion 50/50 分屏

Question

我是 HTML5 和 CSS3 的新手，如果这是一个愚蠢的问题，我深表歉意......

看下图，我想做的是将页面分成 50/50，如果用户单击顶部箭头，顶部会缩小，底部会占据大部分空间，或者如果用户点击底部箭头缩小底部然后顶部占据大部分空间

我不知道该怎么办，请帮忙

Answer 1

您好，请找到工作 DEMO

<div id="accordion">
<h3>Section 1</h3>
 <div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
 <p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>

</div>

 $( "#accordion" ).accordion();