> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/jquery/6.-dong-hua-xiao-guo/6.4-lian-xi-jian-yi-nei-rong-su-he.md).

# 6.4 練習

## 練習 1：簡易內容縮合

提供原始碼：

{% tabs %}
{% tab title="HTML" %}

```markup
<ul class="list">
  
  <li>
    <a class="link_title" href="#">
      <button type="button" class="switch_btn">
        <span class="-plus">+</span><span class="-minus">-</span>
      </button>
      Q1. 如何加入會員？
    </a>
    <div class="inner_block">
      A1. 加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式
    </div>
      
  </li>
  
  <li>
    <a class="link_title" href="#">
      <button type="button" class="switch_btn">
        <span class="-plus">+</span><span class="-minus">-</span>
      </button>
      Q2. 如何加入會員？
    </a>
    <div class="inner_block">
      A2. 加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式
    </div>
      
  </li>
</ul>
```

{% endtab %}

{% tab title="CSS" %}

```css
* {
  box-sizing: border-box;
}
ul.list{
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
}
ul.list > li{
  margin-bottom: 30px;
}

ul.list > li:last-child{
  margin-bottom: 0;
}

ul.list > li > a.link_title{
  display: block;
  width: 100%;
  color: white;
  background-color: #dd2836;
  box-shadow: 2px 2px 8px 0 rgba(56, 55, 53, 0.33);
  border-radius: 26px;
  padding: 8px 40px;
  text-decoration: none;
  font-size: 24px;
  font-weight: normal;
}

ul.list > li > a.link_title::after{
  content: "";
  display: block;
  clear: both;
}
            
ul.list > li > a.link_title button.switch_btn{
  float: right;
  display: inline-block;
  background: none;
  border: 0;
  outline: none;
  color: white;
  font-size: 24px;
}
            
ul.list > li > a.link_title button.switch_btn span.-minus{
  display: none;
}
ul.list > li > div.inner_block{
  font-size: 18px;
  color: #4a4a4a;
  margin-top: 8px;
  padding: 0 40px;
  line-height: 1.6;
  display: none;
}
ul.list > li.-on > a.link_title button.switch_btn span.-plus{
  display: none;
}
ul.list > li.-on > a.link_title button.switch_btn span.-minus{
  display: inline-block
}
```

{% endtab %}
{% endtabs %}

執行方向：

* 在 a 標籤上點擊，該項的 li 標籤加上 `-on` 這個 class。a 標籤要停掉預設行為。
* 內容區域要展開、收合。

結果示意：( <https://youtu.be/7fTac9g69lU> )

{% embed url="<https://youtu.be/7fTac9g69lU>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/oNzKRPj>" %}

## 練習 2：textarea 自動增加高度

{% embed url="<https://codepen.io/carlos411/pen/gOXEKVJ>" %}