1

enter image description here

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle().siblings(".box").hide()
  });
});
.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
  display: none
}

.green {
  background: #228B22;
  display: none
}

.blue {
  background: #0000ff;
  display: block;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

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

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="switch">
            <input type="checkbox" name="colorCheckbox" value="blue" checked>
            <span class="slider round"></span>
        </label>
  <label class="switch">
            <input type="checkbox" name="colorCheckbox" value="green">
            <span class="slider round"></span>
        </label>
  <label class="switch">
            <input type="checkbox" name="colorCheckbox" value="red">
            <span class="slider round"></span>
        </label>
</div>

<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

I have three switches currently but i want three state switches something like this--- https://i.stack.imgur.com/EH2MN.png -------but with text

This code have three diff switches ad by default first one is selected . The one that is selected gives the text of particular one which is selected.

Here I'm adding code snippet for better understanding to make a clear understanding

nuxtic
  • 35
  • 1
  • 9

1 Answers1

1

What you are looking for is not a toggle but a radio button type input. The answer was provided in this question which uses 3 radio inputs and some styling to accomplish what I believe you are looking for.

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}
<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>
acharlop
  • 309
  • 4
  • 12
  • 1
    no this is not what i want----- https://codepen.io/goldsteinr/pen/ftysC -----switch should work like this . And functinality wise it should look like this --- https://jsfiddle.net/f9jnm63p/ . So all together i want both in one @acharlop – nuxtic Jun 27 '19 at 12:09
  • Then kindly word your request in a way that is clearer what you are looking for. Perhaps draw by hand and post an image. We can't guess what you want you need to describe it so we can help you. – acharlop Jun 27 '19 at 12:11
  • switch should look like this --- https://codepen.io/goldsteinr/pen/ftysC and on click on switch state it should open its text like in this link --- https://jsfiddle.net/f9jnm63p/ – nuxtic Jun 27 '19 at 12:15
  • What you are looking for then is just a modified version of the codepen you posted that shows labels instead of icons. This uses radio buttons as I suggested. Is there something specific you have tried editing in that codepen that you are stuck with? – acharlop Jun 27 '19 at 12:16
  • yeah the code that i've posted ... the radio button that I've shown is just a example of what i want result – nuxtic Jun 27 '19 at 12:21
  • My point is that if it's just some CSS styling you don't really learn by not even trying, and besides I don't know exactly what your need for it is. So usually once someone gives you an answer that points you in the right direction you should try and play with it a bit to improve your coding skills. I believe what you are looking for is something like this https://codepen.io/acharlop/pen/VJrpEZ – acharlop Jun 27 '19 at 12:36
  • somewhat my answer is this but i want to show text beneath it when clicked on yes (yes description) and when clicked on neautral (show text beneath it of neautral) and same goes for no switch – nuxtic Jun 27 '19 at 12:41