Q:

toggle on off button and display message

I am looking to toggle the message and the button on and off.  I am trying to get the message to appear when the button turns blue  and disappear when gray.
//style
            .holdswitch {
      position: relative; padding-right:4px; cursor: pointer; display: inline-block;  width: 35px;  height: 20px;  float:right;
    }

    .switch {
      position: absolute; top:15; right:10; cursor: pointer; display: inline-block;  border:solid 1px #ccc;  width: 35px;  height: 20px; background-color: #fff
    }

    .onoff {
     width:20px; height:20px  ;  -webkit-transition: .4s;  transition: .4s;
    }

    #off{
    float:left; background:#A9A9A9; 
    }

    #on{
    float:right; background:#2196F3;
    }

    .info{
        color:#808080;
    }
    .inner_wrap{
     height:auto; overflow:hidden; width;100%; padding:5px 5px 5px 10px; clear:both; position:relative; 
    }
    .alert{
     height:30px; width:230px; margin:auto; clear:both; padinging-top:10px; display:none
    }
    .text{
    width:350px; height:40px; padinging:4px 4px 0px 5px; float:left
    }
    .wrap{
    height:auto; overflow:hidden; width:auto; padinging-bottom:5px; background:#F5F5F5;border-bottom:solid 3px #fff
    }
    .pading{
        padinging:3px
    }

//html code
with more than one div
<div class="wrap">
<div class="inner_wrap">
<div class="text">
    <span class="info">
    Turn on or off
    </span>
</div>  
    <div class="switch">
      <div class="onoff" id="on"></div>
    </div>
</div>
    <div class="alert" style="display:none;">
        Turn on or off
    </div>
</div>
<div class="wrap">
<div class="inner_wrap">
<div class="text">
    <span class="info">
    Turn on or off
    </span>
</div>  
    <div class="switch">
      <div class="onoff" id="off"></div>
    </div>
</div>
    <div class="alert" style="display:none;">
        Turn on or off
    </div>
</div>

//JavaScript
            $(".switch").on("click", function(event){
    var p = $(this).parents();
    $(".alert").hide();
    p.children(".alert").show();

    var swid = $(this).children(".onoff").attr('id');

    if(swid=="on" && p.children(".alert").is(":visible")){
        $(this).children(".onoff").attr('id', 'off');
        p.children(".alert").show();
    }
    else if(swid=="off" && p.children(".alert").is(":visible")){
        $(this).children(".onoff").attr('id', 'on');
        p.children(".alert").hide();
    }
    });

when i click the button the message appears. I want to change button according to the click.

A:

You can use the jQuery .toggle() method and hiding the alert by default OR do it manually by checking event.target.checked, and using .show(), hide() accordingly.

$(".switch input").on("click", function(event){
  /* var isEnabled = event.target.checked */;
  var label = $(this).parents();
  var swid = label.attr('id');
  label.next(".alert").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <div class="text">
        <span class="info">Turn on or off</span>
        <label class="switch" id="nw2">
          <input type="checkbox" value="-1">
          <span class="onoffswitch round"></span>
        </label>
        <div class="alert" style="display:none;">
            alert
        </div>
    </div>
</div>

