jquery实现半透明窗口带折叠效果

js代码

//展开或折叠应急物资数量详情         
            $hideable = $('#hideable');
            $('a#hiding').click(function(event) {
              event.preventDefault();              
              if ($hideable.is(':hidden')) {
                $hideable.slideDown('slow').show();
                $(this).text('▽').css('font-size','20px');
              } else {
                $hideable.slideUp('slow');
                $hideable.hide('slow');
                $(this).text('▷').css('font-size','10px');
              }
            });

css代码及html代码

参考上一个文章 ：css实现背景透明文字不透明

<div class="accordion-header">
  <h4 class="mapheader4"><a href="#" id="hiding">▽</a>窗口标签栏</h4> 
</div>
          
<div id="hideable">
   <ul class="hideline">
         <li >我是line1</li>
              <li >我是line2</li>
             <li >我是line3</li>          
            </ul>
          </div>

---

.accordion-header {background-color:rgba(48,126,204,0.7);border-color: #307ecc; min-height: 30px;padding:2px 8px;}
#hideable {background-color:rgba(48,126,204,0.4);border-color: #307ecc;padding-left:10px;}
#hiding {color:white;font-size:20px;padding-right:10px;}
.mapheader4 {color:white;margin:5px;}  
.hideline li{color: #FFFFFF; font-size:14px;}