以下是一个简单的示例代码，实现了标题在折叠时自动扩展，并且按钮点击时改变标题的功能。

HTML代码：

展开/折叠

  
标题
  
内容

CSS样式：

#content {
  height: 100px;
  overflow: hidden;
  transition: height 0.3s ease;
}

#title.expanded {
  font-size: 24px;
}

#title.collapsed {
  font-size: 16px;
}

JavaScript代码：

var toggleButton = document.getElementById('toggleButton');
var title = document.getElementById('title');
var content = document.getElementById('content');

toggleButton.addEventListener('click', function() {
  content.classList.toggle('expanded');
  title.classList.toggle('expanded');
  title.classList.toggle('collapsed');
  
  if (content.classList.contains('expanded')) {
    content.style.height = content.scrollHeight + 'px';
  } else {
    content.style.height = '100px';
  }
});

在这个示例中，点击按钮时，通过添加/移除CSS类名来改变标题的样式。同时，通过设置内容容器的高度为内容的实际高度或固定值来实现内容的展开和折叠效果。