I am trying to make a donut wheel that when a user clicks on one of the section it expands and shows a text field describing what that specific position in grater details. The donut wheel specifically shows like the keyword of the process (this is a process donut wheel) such as “Company Registration” and when the client clicks on the “Company Registration” part of the wheel that section will expand and show in further details (max. 150 characters) what this process includes.

I am no coder but I hope there is someone in the community who might be able to help me with this.

Currently I do have a few concepts that I have looked from other people. By far this is what I got on CodePen (Click here). I am not aware on how to get the expand feature, on click.

<div class="arrow-chart">
  <section class="medium">
    <label>The goals</label>
  </section>
  <section class="low">
    <label>Regional criteria</label>
  </section>
  <section class="high">
    <label>Feasibility criteria</label>
  </section>
  <section class="medium">
    <label>Form of operation</label>
  </section>
  <section class="low">
    <label>Risk management</label>
  </section>
  <section class="high">
    <label>The motive</label>
  </section>
</div>

* {
  box-sizing: border-box;
}
html {
  font-family: Sans-Serif;
  font-size: 16px;
}
.arrow-chart {
  width: 350px;
  height: 350px;
  position: relative;
  text-align: center;
  border-radius: 100%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  /*   -ms-transform: scale(0.35, 0.35);
  -webkit-transform: scale(0.35, 0.35);
  transform: scale(0.35, 0.35); */
}
.arrow-chart:after {
  content: "";
  display: block;
  background: #ffffff;
  width: 50%;
  height: 50%;
  z-index: 10;
  position: absolute;
  border-radius: 100%;
  top: 25%;
  left: 25%;
  /*   opacity: .8; */
  /*   display: none; */
}

.arrow-chart section {
  height: 48%;
  width: 55%;
  position: absolute;
  text-align: center;
  color: #cccccc;
  background-color: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-clip-path: polygon(
    75% 0%,
    100% 50%,
    75% 100%,
    0% 100%,
    25% 50%,
    0% 0%
  );
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.arrow-chart section label {
  font-size: 0.7rem;
  font-weight: bold;
  position: relative;
  width: 50%;
  padding: 0 5%;
  margin: 25% 0 0 0;
  display: block;
  color: #ffffff;
}

.arrow-chart section:nth-child(1) {
  transform: rotate(0);
  margin-left: 44%;
  margin-top: -12%;
}
.arrow-chart section:nth-child(1) label {
  transform: rotate(0);
}
.arrow-chart section:nth-child(2) {
  /*   display: none; */
  transform: rotate(60deg);
  margin-left: 66%;
  margin-top: 26%;
}
.arrow-chart section:nth-child(2) label {
  transform: rotate(-60deg);
}
.arrow-chart section:nth-child(3) {
  /*   display: none; */
  transform: rotate(120deg);
  margin-left: 44%;
  margin-top: 64%;
}
.arrow-chart section:nth-child(3) label {
  transform: rotate(-120deg);
}
.arrow-chart section:nth-child(4) {
  /*   display:none; */
  transform: rotate(180deg);
  margin-left: 0.25%;
  margin-top: 64%;
}
.arrow-chart section:nth-child(4) label {
  transform: rotate(-180deg);
}
.arrow-chart section:nth-child(5) {
  /*   display:none; */
  transform: rotate(240deg);
  margin-left: -21.5%;
  margin-top: 26%;
}
.arrow-chart section:nth-child(5) label {
  transform: rotate(-240deg);
}
.arrow-chart section:nth-child(6) {
  /*   display:none; */
  transform: rotate(300deg);
  margin-left: 0%;
  margin-top: -12%;
}
.arrow-chart section:nth-child(6) label {
  transform: rotate(-300deg);
}

figure ul {
  list-style: none;
}

figure li:before {
  content: "2022";
  display: inline-block;
  width: 2rem;
  margin-left: -1rem;
  font-size: 5rem;
  vertical-align: middle;
}
figure li {
  height: 2rem;
}
figure li span {
  color: #424242;
  display: inline-block;
}

/* Color Palette from https://www.materialui.co/colors */
.high {
  color: #686d6e !important;
}
.medium {
  color: #9f2030 !important;
}
.low {
  color: #010101 !important;
}