<section class="sample">
  <h3>募集職種</h3>
  <h4 class="accordion_title">企画営業</h4>
  <div class="accordion_content">
    <p>
      仕事内容<br>
      ・実際にお客様先へ訪問し、課題をヒアリング<br>
      ・お客様の戦略に関わり、課題を抽出<br>
      ・分析データや市場データを元にベストマッチなプランを考え、提案<br>
      ・既存クライアントへのフォロー営業、マーケティング戦略の立案<br>
      ・アフターフォロー<br><br>

      なお、営業方法等は先輩がやさしく教えます。<br>
      仕事を通して、大きく成長していきたいと考えている方からのご応募をお待ちしております。<br>
      また、起業を考えている方も大歓迎です。<br><br>

      求めるスキル<br>
      ・早く成長したいという気持ちを持っている方<br>
      ・人間関係を大切にし、信頼を得るコミュニケーションができる方
    </p>
  </div>

  <h4 class="accordion_title">WEBデザイナー</h4>
  <div class="accordion_content">
    <p>
      仕事内容<br>
      ・tech engineers jobの機能追加<br>
      ・自社メディアのiPhone、Android対応<br>
      ・ポートフォリオをはじめとする広報資料作成<br>
      ・画像加工・バナー作成<br>
      ・Facebook / Twitter / Instagramコンテンツ・デザイン<br><br>

      社内で蓄積されたノウハウを随時共有し、<br>
      よりレベルの高いデザインを求められる環境があります。<br>
      Web全般はもちろんの事、社内勉強会を通じ、<br>
      ソーシャルメディアと連動させる企画力や<br>
      マーケティングスキルを身につけることもできます。<br><br>
      求めるスキル<br>
      ・人間関係を大切にし、信頼を得るコミュニケーションができる方<br>
      ・新しい技術、文化に触れながら面白いものを作成したい方<br>
      ・HTML5、jQuery、CSS3の使用/イラスト作成、編集できる方
    </p>
  </div>

  <h4 class="accordion_title">システムエンジニア</h4>
  <div class="accordion_content">
    <p>
      仕事内容<br>
      ・Java,PHPでの開発<br>
      ・システムの改善<br>
      ・素早いパフォーマンス・チューニング<br>
      ・新規システムの設計、開発<br><br>

      技術を駆使し、コンピュータ・システムを設計していただきます。<br>
      また、自動化の実現や素早いフィードバックをしていただきます。<br><br>

      求めるスキル<br>
      ・早く成長したいという気持ちを持っている方<br>
      ・人間関係を大切にし、信頼を得るコミュニケーションが出来る方<br>
      ・自らタスクを見つけ、実行することが出来る方<br>
      ・事業に最適なシステムや仕組みを作り上げることが出来る方
    </p>
  </div>

  <h4 class="accordion_title">広報／PR、人事、経理など</h4>
  <div class="accordion_content">
    <p>
      仕事内容<br>
      ・決算業務<br>
      ・請求書発行業務<br>
      ・コスト管理業務<br>
      ・社内外の情報収集<br>
      ・社内広報<br><br>

      担当の事業において一環して業務をこなしつつ、広い視野を持って業務に取り組んでいただきます。<br>
      また、職種にとらわれず、皆で一体感を持って事業を成長させていくことが可能です。<br><br>
      求めるスキル<br>
      ・早く成長したいという気持ちを持っている方<br>
      ・人間関係を大切にし、信頼を得るコミュニケーションが出来る方<br>
      ・自ら考え、行動できる方
    </p>
  </div>
</section>
/* サンプル用の調整 */
body {
    overflow-y: scroll;
}
.sample {
  width: 80%;
  margin: 0 auto;
}

/* ここからアコーディオン用 */
.accordion_title {
  display: flex;
  position: relative;
}

.accordion_title::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background-color: #ff5081;
  position: absolute;
  right: 0;

  transform: rotate(90deg);

  transition: .5s;
}

.accordion_title::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background-color: #ff5081;
  position: absolute;
  right: 0;

  transform: rotate(0deg);
}

.accordion_title.active::before {
  transform: rotate(0deg);
}

.accordion_title:hover {
  cursor: pointer;
}

.accordion_content {
  display: block;
  margin: 0;
  height: 0;
  overflow: hidden;

  transition: .5s;
}

.accordion_content.show {
  margin-bottom: 40px;
}

.accordion_content:last-of-type {
  margin-bottom: 40px;
}
window.onload = init();

function init() {
  const accordion_items = document.querySelectorAll(".accordion_title");
  for (var i = 0; i < accordion_items.length; i++) {
    accordion_items[i].addEventListener("click", function () {
      this.nextElementSibling.classList.toggle("show");
      this.classList.toggle("active");
      if (this.classList.contains("active")) {
        this.nextElementSibling.style.height =
          // 40は余白分
          this.nextElementSibling.children[0].clientHeight + 40 + "px";
      } else {
        this.nextElementSibling.style.height = 0;
      }
    });
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.