Как открыть div на основе щелчка переключателя?

Question

Я создал переключатель bootstrap, и у меня есть div в нижней части переключателя, поэтому, когда переключатель включен, я хочу, чтобы div отображался, а когда он выключен, я хочу, чтобы div скрывал. Я нахожу какое-то решение, которое отображается только для флажка.

Как я могу это сделать?

Например, если флажок переключателя установлен, то мне нужно показать содержимое div, иначе скрыть див.

.tags-list-group {
    margin-bottom: 50px;
}

.tags-list-group .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
}

.tags-list-group .switch input {
    display: none;
}

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

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

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

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

.tags-list-group .slider.round:before {
    border-radius: 50%;
}

.tags-list-group input.success:checked + .slider {
    background-color: #8bc34a;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

<div class="tags-list-group">
    <div class="tags-group-card">
        <!-- Default panel contents -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item custom-list-group-item">
                User Defined
                <label class="switch ">
                    <input type="checkbox" class="success">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </div>
    <div class="list-group-item show-content">
        <p>Content 1(hide div)</p>
    </div>

</div>

Answer 1

Это то, что вы хотели, основываясь на вашем коде. Но, на мой взгляд, вы можете получить более аккуратный, используя компонент свертывания из Bootstrap и встраивая в него свой переключатель.

$("#myCustomCheckbox").change(function(){

  // in case the switch is on
  if(this.checked) {
        $("#myDivOfContent").addClass("content-area--show");
        
  // in case switch is off
    }else{
        $("#myDivOfContent").removeClass("content-area--show");
    }
});

/*** begin::div of content styles ****/

.content-area {
  height: 0;
  width: 100%;
  overflow: hidden;
  transition: height .3s ease-in-out;
 }
 
 .content-area p {
  padding: 20px;
}
 
.content-area--show {
  height: 70px;
  border: 1px solid #ccc;
  border-top: 0;
}

.switch {
 margin-bottom: 0;
 }
/*** end::div of content styles ****/

.tags-list-group {
    margin-bottom: 50px;
}

.tags-list-group .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
}

.tags-list-group .switch input {
    display: none;
}

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

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

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

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

.tags-list-group .slider.round:before {
    border-radius: 50%;
}

.tags-list-group input.success:checked + .slider {
    background-color: #8bc34a;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

<div class="tags-list-group">
    <div class="tags-group-card">
        <!-- Default panel contents -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item custom-list-group-item ">
                User Defined
                <label class="switch">
                    <input type="checkbox" class="success" id="myCustomCheckbox">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </div>
    <div class="content-area" id="myDivOfContent">
        <p>Content 1(hide div)</p>
    </div>

</div>

Answer 2

Вы можете просто прикрепить .click () к ползунку и затем использовать .toggle () , чтобы показать / скрыть элемент, вот рабочий фрагмент:

$(document).ready(function(){
  $('.show-content').hide();
  $('.slider').click(function(e) {
    $('.show-content').toggle();
  })
})

.tags-list-group {
    margin-bottom: 50px;
}

.tags-list-group .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
}

.tags-list-group .switch input {
    display: none;
}

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

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

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

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

.tags-list-group .slider.round:before {
    border-radius: 50%;
}

.tags-list-group input.success:checked + .slider {
    background-color: #8bc34a;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

<div class="tags-list-group">
    <div class="tags-group-card">
        <!-- Default panel contents -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item custom-list-group-item">
                User Defined
                <label class="switch ">
                    <input type="checkbox" class="success">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </div>
    <div class="list-group-item show-content">
        <p>Content 1(hide div)</p>
    </div>

</div>

Answer 3

Используя JQuery, вы можете достичь чего-то подобного:

$('.show-content').hide() // Init with hidden .show-content

$('input.success').change(function() {
  if (this.checked) {
    $('.show-content').show()
  } else {
    $('.show-content').hide()
  }
});

.tags-list-group {
  margin-bottom: 50px;
}

.tags-list-group .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}

.tags-list-group .switch input {
  display: none;
}

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

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

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

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

.tags-list-group .slider.round:before {
  border-radius: 50%;
}

.tags-list-group input.success:checked+.slider {
  background-color: #8bc34a;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.bundle.min.js"></script>

<div class="tags-list-group">
  <div class="tags-group-card">
    <!-- Default panel contents -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item custom-list-group-item">
        User Defined
        <label class="switch ">
          <input type="checkbox" class="success">
          <span class="slider round"></span>
        </label>
      </li>
    </ul>
  </div>
  <div class="list-group-item show-content">
    <p>Content 1(hide div)</p>
  </div>

</div>

Используется функция .show () , .hide () и изменить событие.

Answer 4

Это довольно просто с jquery. Оформить заказ на следующем примере

$(document).ready(() => {
    $("#content").hide();

    $("#chkbox").click((e) => {
        if ($("#chkbox").is(":checked")) {
            $("#content").show();
        } else {
            $("#content").hide();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="" id="chkbox" />
<div id="content">
    <p>Hidden Content</p>
</div>

Answer 5

Используйте prop для проверки this:

$(function() {
  $('.success').change(function() {
    if ($(this).prop('checked')) {
      $(".show-content").show();
    } else {
      $(".show-content").hide();
    }
  })
});

.tags-list-group {
  margin-bottom: 50px;
}

.tags-list-group .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}

.tags-list-group .switch input {
  display: none;
}

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

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

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

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

.tags-list-group .slider.round:before {
  border-radius: 50%;
}

.tags-list-group input.success:checked+.slider {
  background-color: #8bc34a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="tags-list-group">
  <div class="tags-group-card">
    <!-- Default panel contents -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item custom-list-group-item">
        User Defined
        <label class="switch ">
                    <input type="checkbox" class="success">
                    <span class="slider round"></span>
                </label>
      </li>
    </ul>
  </div>
  <div class="list-group-item show-content" style="display:none;">
    <p>Content 1(hide div)</p>
  </div>

</div>