Как скрыть / показать по div с классом на тумблере

Question

Мне нужно реализовать тумблер, при котором, если вы нажмете первый раз, div с указанным классом c будет скрыт. Если вы щелкнете по нему еще раз, div должен появиться снова. До сих пор я пытался решить ее с помощью небольшого jquery скрипта. Я должен сказать, что я не эксперт jquery. Так что, если у вас есть лучшие решения с другим языком сценариев, я открыт для вас; -)

Часть Hide работает отлично. Только часть показа div снова после второго клика не работает.

Вот код, который у меня есть до сих пор:

html:

<label class="switch"><input type="checkbox"><span class="slider round hide-off"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

jquery:

$(document).ready(function(){

  $(".hide-off").click(function(){
    $(".hideme").hide();
    $(this).removeClass('hide-off');
    $(this).addClass('hide-on');
  });

  $(".hide-on").click(function(){
    $(".hideme").show();
    $(this).removeClass('hide-on');
    $(this).addClass('hide-off');
  });

});

Найдите код отверстия inkl. CSS / style ... здесь: https://jsfiddle.net/r9newfmb/1/

Ждем ваших предложений.

Спасибо вам уже за вашу поддержку!

Answer 1

с javascript вы можете легко переключать класс css.

let cb = document.getElementsByTagName("input");
cb[0].addEventListener("click",function(e) { 
        let myDivs = document.getElementsByClassName("hideme");
        myDivs[0].classList.toggle("hide");
    });

.hide{
display: none;
}

<label class="switch">
<input type="checkbox">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Answer 2

Я бы проверил статус флажка.

$(document).ready(function(){
  $(".switch input").on("change", function(e) {
    const isOn = e.currentTarget.checked;

    if (isOn) {
        $(".hideme").hide();
    } else {
        $(".hideme").show();
    }
  });
});

Лин здесь: https://jsfiddle.net/o8ruye1k/3/

Answer 3

Вы можете легко сделать это, используя jQuery функцию переключения

$(document).ready(function(){

$(".toggle-switch").click(function(){
  $(".hideme").toggle();
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round toggle-switch"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Answer 4

Скорее всего, ваш код, но ваша скрытая функция не работает

$(document).on('click', '.hide-off', function () {
  $('.hideme').hide();
  $(this).removeClass('hide-off');
  $(this).addClass('hide-on');
})

$(document).on('click', '.hide-on', function () {
  $('.hideme').show();
  $(this).removeClass('hide-on');
  $(this).addClass('hide-off');
})

.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);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/



.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round hide-off"></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Answer 5

Попробуйте, ваниль JS.

<button data-toggle="">Hide/Show</button>

<p data-toggle-this="">Hello</p>

Я думаю, что чистый / ваниль JS будет проще.

document.querySelector('[data-toggle]').addEventListener('click', (item) => {
 const toggle = document.querySelector('[data-toggle-this]')
 const isVisible = toggle.classList.contains('show') // Here we check that our element has class show
 if (isVisible) {
  toggle.classList.remove('show') // Here we remove class if it is
 } else {
  toggle.classList.add('show') // Here we added class
 }
})