In my application, I have some icons and on the right side there is a toggle button and it has to be active by default with bold text on its right side.

And my requirement is when we click on any of the icons (it will change the color) from above the toggle switch on the right side should be turned off, and the text has to be muted. And vice versa (when we click on the toggle switch the color of the icon has to be removed).

My code is

.component.html

<div >
  <div >
    <div >
      <img src="../assets/img/dividers.png" />
      <label  for="power">Confidence Scale:</label>
      <p >Select Confidence level</p>
    </div>
    <div >
      <label >
        <input  type="checkbox" checked />
        <div ></div>
      </label>
    </div>
    <div >No</div>
  </div>
  <span ></span
  ><i ></i>
  <span ></span><i ></i>
  <span ></span><i ></i>
  <span ></span><i ></i>
  <span ></span><i ></i>
  <span ></span><i ></i>
</div>

.component.css

.switch,
.rating-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}
.slide {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slide:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 1.2px;
  bottom: 2px;
  top: 0.5px;
  background-color: #2b547e;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.rating-checkbox:checked   .slide {
  background-color: #87d3f8;
}

.rating-checkbox:focus   .slide {
  box-shadow: 0 0 1px #87d3f8;
}

.rating-checkbox:checked   .slide:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}
.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.no-rating-switch {
  margin-left: -1.5em;
  margin-top: 2.8em;
}

and the below code I have used to toggle the color of the icon when we click on it

.component.ts

$(".stl").click(function () {
  $(".stl").removeClass("active");
  $(this).addClass("active");
});

I have tried multiple ways but I am unable to do it.

CodePudding user response：

I had to mock the icons with numbers - but the logic is there. Please, look at the changes in the HTML, CSS and JS:

• wrapper and container classes were added (HTML, CSS) to contain & position the toggle button
• the JS is pretty simple - one utility function & the two click handlers.

const removeIconActiveClass = () => {
  $(".stl").each((i, el) => {
    $(el).removeClass('active')
  })
}

$(".stl").click(function() {
  removeIconActiveClass()
  $(this).addClass('active')
  $(".rating-checkbox").prop("checked", false)
  $(".no-rating-switch").addClass("text-muted")
});

$(".rating-checkbox").on("click", function() {
  removeIconActiveClass()
  $(".no-rating-switch").removeClass("text-muted")
})

.stl {
  cursor: pointer;
}

.stl:hover {
  color: blue;
}

.stl.active {
  color: red;
}

.switch,
.rating-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.rating-switch-wrapper {
  position: relative;
}
.rating-text-container {
  align-items: center;
  gap: 10px;
}

.slide {
  position: absolute;
  cursor: pointer;
  height: 20px;
  width: 52px;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  transform: translateY(-50%);
}

.slide:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3.2px;
  bottom: 2px;
  top: 0.5px;
  background-color: #2b547e;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.rating-checkbox:checked .slide {
  background-color: #87d3f8;
}

.rating-checkbox:focus .slide {
  box-shadow: 0 0 1px #87d3f8;
}

.rating-checkbox:checked .slide:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}

.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.no-rating-switch {}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <!-- please, never provide local routes in a snippet
      they not only do not work, but confuse the others -->
      <img src="" />
      <label  for="power">Confidence Scale:</label>
      <p >Select Confidence level</p>
    </div>
    <div >
      <div >
        <div >No</div>
        <div >
          <label >
          <input  type="checkbox" checked />
          <div ></div>
        </label>
        </div>
      </div>
    </div>
  </div>
  <i >1</i>
  <i >2</i>
  <i >3</i>
  <i >4</i>
  <i >5</i>
  <i >6</i>
</div>

CodePudding user response：

Check this solution here, done in angular

https://stackblitz.com/edit/angular-ivy-bvwone?file=src/app/app.component.ts