以下是一个使用HTML、CSS和JavaScript实现半展开折叠工具栏的示例：

HTML代码：

  Toggle
  

    
  

CSS代码：

.toolbar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 50px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  transition: width 0.3s ease;
}

.toolbar .toggle-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

.toolbar .content {
  position: absolute;
  top: 0;
  left: 50px;
  width: 150px;
  height: 100%;
  overflow: hidden;
  transition: width 0.3s ease;
}

.toolbar.collapsed {
  width: 50px;
}

.toolbar.collapsed .content {
  width: 0;
}

JavaScript代码：

const toggleBtn = document.querySelector('.toggle-btn');
const toolbar = document.querySelector('.toolbar');

toggleBtn.addEventListener('click', function() {
  toolbar.classList.toggle('collapsed');
});

在上面的示例中，我们使用了toolbar类来定义工具栏的样式。工具栏由一个按钮和一个内容区域组成。按钮用于切换工具栏的展开和折叠状态，内容区域用于显示工具栏的具体内容。

通过JavaScript代码，我们监听按钮的点击事件，当点击按钮时，会在工具栏的根元素上切换collapsed类。当工具栏处于折叠状态时，工具栏的宽度会变为50px，并隐藏内容区域；当工具栏处于展开状态时，工具栏的宽度会变为200px，并显示内容区域。

通过这种方式，我们可以实现一个半展开折叠的工具栏，用户可以根据需要展开或折叠工具栏来节省屏幕空间。