Volonter,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.col-1 {
background-color: #FFFF00;
}
.col-3 {
background-color: #FF0000;
}
.col-9{
background-color: #8B4513;
}
.col-11{
background-color: #0000FF;
}
</style>
</script>
</head>
<body>
<div id="sidebar" class="col-3">sidebar</div>
<div id="content" class="col-9">content</div>
<input id="toggle" name="" type="button" value="toggle">
<script>
const toggleBtn = document.getElementById('toggle')
const sidebar = document.getElementById('sidebar')
const content = document.getElementById('content')
toggleBtn.addEventListener('click', sidecollapse, false)
function sidecollapse() {
sidebar.classList.toggle('col-3');
sidebar.classList.toggle('col-1');
content.classList.toggle('col-11');
content.classList.toggle('col-9');
}
</script>
</body>
</html>