blocks|key|320036|text|你需要少量的javascript来触发一个事件(显示/隐藏div)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320037|<a+href="#">+Home+</a>

<a+class="right"+href="javascript:toggle_messege('inline')"+id='href_about'>+About+</a>
<br+/>
<a+class="right+hide"+href="javascript:toggle_messege('none')"+id='hreh_close'>+(Close)</a>

<div+id='div_messege'+class='hide'>Hidden+messege+to+show,+Hidden+messege+to+show+Hidden+messege+to+show+Hidden+messege+to+show</div>
Test+Test+TestTestTestTestTestTestTest
Test+Test+TestTestTestTestTestTestTest
Test+Test+TestTestTestTestTestTestTest
Test+Test+TestTestTestTestTestTestTest
Test+Test+TestTestTestTestTestTestTest|code-block|syntax|javascript|320038|CSS|320039|.right+{
++++float:right;
}
.hide+{
++++display:none
}|320040|320041|function+toggle_messege(type)+{
+document.getElementById("div_messege").style.display+=+type;
++++document.getElementById("hreh_close").style.display+=+type;

}|320042|检查是否正在运行示例http://codepen.io/faishal/pen/IHEyw|offset|length|320043|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/faishal/pen/IHEyw^0|0|0|0|0|0|0|A|Z|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|K|3|F|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

You need litle javascript to trigger an event (show/hide div)

<pre><code>&lt;a href="#"&gt; Home &lt;/a&gt;

&lt;a class="right" href="javascript:toggle_messege('inline')" id='href_about'&gt; About &lt;/a&gt;
&lt;br /&gt;
&lt;a class="right hide" href="javascript:toggle_messege('none')" id='hreh_close'&gt; (Close)&lt;/a&gt;

&lt;div id='div_messege' class='hide'&gt;Hidden messege to show, Hidden messege to show Hidden messege to show Hidden messege to show&lt;/div&gt;
&lt;p&gt;Test Test TestTestTestTestTestTestTest&lt;/p&gt;
&lt;p&gt;Test Test TestTestTestTestTestTestTest&lt;/p&gt;
&lt;p&gt;Test Test TestTestTestTestTestTestTest&lt;/p&gt;
&lt;p&gt;Test Test TestTestTestTestTestTestTest&lt;/p&gt;
&lt;p&gt;Test Test TestTestTestTestTestTestTest&lt;/p&gt;
</code></pre>

CSS

<pre><code>.right {
 float:right;
}
.hide {
 display:none
}
</code></pre>

javascript

<pre><code>function toggle_messege(type) {
 document.getElementById("div_messege").style.display = type;
 document.getElementById("hreh_close").style.display = type;

}
</code></pre>

check this for running example <a href="http://codepen.io/faishal/pen/IHEyw" rel="noreferrer">http://codepen.io/faishal/pen/IHEyw</a>

blocks|key|320087|text|这个答案完整地解释了如何实现它：Pure+CSS+collapse/expand+div|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|320088|下面是一个简短的概述：|320089|<div+class="FAQ">
++++<a+href="#hide1"+class="hide"+id="hide1">%2B</a>
++++<a+href="#show1"+class="show"+id="show1">-</a>
++++<div+class="question">+Question+Question+Question+Question+Question+Question+Question+Question+Question+Question+Question?+</div>
++++++++<div+class="list">
++++++++++++Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+Answer+
++++++++</div>
</div>|code-block|syntax|javascript|320090|CSS|320091|/*+source:+http://www.ehow.com/how_12214447_make-collapsing-lists-java.html+*/

.FAQ+{+
++vertical-align:+top;+
++height:+auto;+
}

.list+{
++display:none;+
++height:auto;
++margin:0;
++float:+left;
}

.show+{
++display:+none;+
}

.hide:target+%2B+.show+{
++display:+inline;+
}
.hide:target+{
++display:+none;+
}
.hide:target+~+.list+{
++display:inline;+
}

/*style+the+(%2B)+and+(-)+*/
.hide,+.show+{
++width:+30px;
++height:+30px;
++border-radius:+30px;
++font-size:+20px;
++color:+#fff;
++text-shadow:+0+1px+0+#666;
++text-align:+center;
++text-decoration:+none;
++box-shadow:+1px+1px+2px+#000;
++background:+#cccbbb;
++opacity:+.95;
++margin-right:+0;
++float:+left;
++margin-bottom:+25px;
}

.hide:hover,+.show:hover+{
++color:+#eee;
++text-shadow:+0+0+1px+#666;
++text-decoration:+none;
++box-shadow:+0+0+4px+#222+inset;
++opacity:+1;
++margin-bottom:+25px;
}

.list+p+{
++height:auto;
++margin:0;
}
.question+{
++float:+left;
++height:+auto;
++width:+90%25;
++line-height:+20px;
++padding-left:+20px;
++margin-bottom:+25px;
++font-style:+italic;
}|320092|和工作jsFiddle：|320093|http://jsfiddle.net/dmarvs/94ukA/4/|320094|再说一次，以上都不是我的工作，只是为了澄清，但它只是去表明它是多么容易在谷歌上找到它！|320095|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/15095933/pure-css-collapse-expand-div|1^0|G|S|0|0|0|0|0|0|0|0|Z|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|R]]]]

This answer explains how it can be achieved in full: <a href="https://stackoverflow.com/questions/15095933/pure-css-collapse-expand-div">Pure CSS collapse/expand div</a>

Here is a quick rundown:

<pre><code>&lt;div class="FAQ"&gt;
 &lt;a href="#hide1" class="hide" id="hide1"&gt;+&lt;/a&gt;
 &lt;a href="#show1" class="show" id="show1"&gt;-&lt;/a&gt;
 &lt;div class="question"&gt; Question Question Question Question Question Question Question Question Question Question Question? &lt;/div&gt;
 &lt;div class="list"&gt;
 &lt;p&gt;Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer &lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CSS

<pre><code>/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
 vertical-align: top; 
 height: auto; 
}

.list {
 display:none; 
 height:auto;
 margin:0;
 float: left;
}

.show {
 display: none; 
}

.hide:target + .show {
 display: inline; 
}
.hide:target {
 display: none; 
}
.hide:target ~ .list {
 display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
 width: 30px;
 height: 30px;
 border-radius: 30px;
 font-size: 20px;
 color: #fff;
 text-shadow: 0 1px 0 #666;
 text-align: center;
 text-decoration: none;
 box-shadow: 1px 1px 2px #000;
 background: #cccbbb;
 opacity: .95;
 margin-right: 0;
 float: left;
 margin-bottom: 25px;
}

.hide:hover, .show:hover {
 color: #eee;
 text-shadow: 0 0 1px #666;
 text-decoration: none;
 box-shadow: 0 0 4px #222 inset;
 opacity: 1;
 margin-bottom: 25px;
}

.list p {
 height:auto;
 margin:0;
}
.question {
 float: left;
 height: auto;
 width: 90%;
 line-height: 20px;
 padding-left: 20px;
 margin-bottom: 25px;
 font-style: italic;
}
</code></pre>

And the working jsFiddle:

<a href="http://jsfiddle.net/dmarvs/94ukA/4/" rel="nofollow noreferrer">http://jsfiddle.net/dmarvs/94ukA/4/</a>

Again none of the above is my work just to clarify, but it just goes to show how easy it is to find it on Google!!

I'm putting together a website. I need help creating the following feature: 

I want the "About" link to expand into a panel when clicked, and retract when the user presses "hide" in the panel. I've attached a diagram below to clarify what it should look like. When the user presses About in (1), it becomes (2), and when the user presses hide in (2), it becomes (1) again.

<img src="https://i.stack.imgur.com/xhPFE.png" alt="layout">

I would like to do this in pure HTML/CSS, if possible. Does anyone know how I can do this?

Collapsible Panel in HTML/CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在建一个网站。我需要帮助创建以下功能：我希望“关于”链接在单击时展开为一个面板，并在用户按下面板中的“隐藏”时收回。我在下面附上了一张图表，以阐明它应该是什么样子。当用户按下(1)时，它变成(2)，当用户按下hide in (2)时，它再次变成(1)。​​如果可能的话，我想用纯HTML/CSS来做这件事。有人知道我是...

问HTML/CSS中的可折叠面板
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS中的可折叠面板EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS中的可折叠面板
EN