JSFiddle - React, Tailwind, and code Playground

HTML

<!-- CSSのみで実装するカーテン -->
<div class="container">
  <input type="checkbox" id="checkbox" class="btn__checkbox"><label for="checkbox" class="btn">ボタン風チェックボックス</label>
  <div class="curtain curtain--left"></div>
  <div class="curtain curtain--right"></div>
</div>

<!-- jQueryで実装するカーテン -->
<div class="container">
  <button type="button" id="button" class="btn">ボタン</button>
  <div id="curtain-left" class="curtain curtain--left js-curtain"></div>
  <div id="curtain-right" class="curtain curtain--right js-curtain"></div>
</div>

CSS

/*==================================================

** リセットCSS
==================================================*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
  font-family: sans-serif;
}

/*==================================================

** 共通スタイル
==================================================*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 600px;
  aspect-ratio: 2 / 1;
  position: relative;
  margin: 0 auto 2em;
  background-color: #eee;
}

.btn {
  display: block;
  margin: 0.4em auto 0;
  padding: 0.5em 1em;
  appearance: none;
  color: white;
  background-color: orange;
  border: none;
  border-radius: 0.3em;
  font-size: 1em;
  cursor: pointer;
  z-index: 1;
}

.curtain {
  width: 50%;
  height: 100%;
  position: absolute;
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

.curtain--left {
  left: 0;
  background-color: red;
  
  /* 変形の起点を左上に設定 */
  transform-origin: 0 0;
}

.curtain--right {
  right: 0;
  background-color: black;
  
  /* 変形の起点を右上に設定 */
  transform-origin: 100% 0;
}

/*==================================================

** CSSのみで実装するカーテン用スタイル
==================================================*/
/* チェックボックスの✅マークは不要なので非表示 */
.btn__checkbox {
  display: none;
}

/* チェックボックスにチェックが入っている状態のときのスタイル */
.btn__checkbox:checked ~ .curtain {
  transform: scaleX(0);
}

/*==================================================

** jQueryで実装するカーテン用スタイル
==================================================*/
/* jQueryでつけはずしするclass */
.curtain.is-open {
  transform: scaleX(0);
}

JavaScript

jQuery(function($) {
  // ボタンを押すたびに、左右のカーテンにclassをつけはずし
  $('#button').on('click', function() {
    $('.js-curtain').toggleClass('is-open');
  })
});