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();

Answer 2

转到http://jqueryui.com/

在小部件下的左栏中，您将看到手风琴，请查看。

Answer 3

这是一个浏览器/客户端处理事件，因此您需要基本了解 JavaScript ，更好的是 jQuery 。你可以通过不同的方式实现它，但为了简单而美观的例子，我将只是简单易行。

您可以在点击事件（click（）方法）上触发jQuery并切换顶级DIV的可见性。

请参阅this fiddle或更精彩的方式，请参阅this fiddle。

使用的jQuery方法是

$(element).toggle();
$(element).slideToggle();

参考：https://api.jquery.com/?s=toggle