How to get more toggle hide/show div with different class-CodePudding

I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.

Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.

Can anyone give me a suggestion?

Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/

function save() {   
    var checkbox = document.getElementById("ck1");
    localStorage.setItem("ck1", JSON.stringify(checkbox.checked));  
}

function isChecked(isOn) {
    if (isOn === true) {
        $(".hideme").show();
    } else {
        $(".hideme").hide();
    }
}

//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
    document.getElementById("ck1").checked = checked;

console.log(checked);

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

.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;
}

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label >
<input type="checkbox" id="ck1" onchange="save()">
<span ></span>
</label>
<br><br>

<div >Please hide me, but bring me back later ;-)</div>

CodePudding user response：

I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.

HTML:

<label >
  <input type="checkbox" id="ck1">
  <span ></span>
</label>
<br><br>

<label >
   <input type="checkbox" id="ck2">
   <span ></span>
</label>
<br><br>

<div  id="label-ck1">Please hide me...</div>
<div  id="label-ck2">Please hide me...</div>

JAVASCRIPT

$(document).ready(function(){
    getLocalStatus()
    $(".switch input").on("change", function(e) {
       const element = e.currentTarget;
       saveStatus(element)
       setLabelVisibility(element.getAttribute('id'),element.checked);
    })
})

function getLocalStatus() {
    const checkboxes = $('input[type=checkbox]');
    checkboxes.each(function(index,checkbox){
        const checkboxId = checkbox.getAttribute('id')
        var currentStatus= localStorage.getItem(checkboxId)
        if (currentStatus == "true") {
            currentStatus = true;
        } else {
          currentStatus = false;
        }
        checkbox.checked = currentStatus;
        setLabelVisibility(checkboxId, currentStatus)
    })
}

function setLabelVisibility(id,status){
   const label = $("#label-"   id   "");
   if(status == false){
      label.hide();
      return;
   }
   label.show();
 }

 function saveStatus(e) {   
    localStorage.setItem(e.getAttribute('id'), e.checked)
 }

CodePudding user response：

You need to give your show/hide DIVs different IDs and pass those into the function. (this is just one of several ways)

The element you want to show/hide needs a unique ID so we can differentiate it from the others, so forget about using a class as a selector here. The toggle function takes two parameters, the element that called it and the element ID that gets toggled. In the HTML below, 'this' will refer to that specific checkbox when its clicked. '#div1' and '#div2' are the IDs of the elements to toggle.

I've added in your local storage bit.

function toggle(p, c){
    if ($(p).prop("checked")){
    $(c).show();
  }else{
    $(c).hide();
  }

  localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));

}

.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;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span ></span>
</label>

<label >
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span ></span>
</label>
<br><br>

<div id="div1" >Please hide me, but bring me back later ;-)</div>
<div id="div2" >Please hide me, but bring me back later ;-)</div>

CodePudding user response：

This is another possible solution and one that I would prefer:

Change the input as so:

<input type="checkbox" id="ck1"  data-toggle-id="#div1">

Then the javascript (with jquery) would look like this instead:

$('.btn').on('change', function(){
    var $d = $($(this).attr('data-toggle-id'));
    if ($(this).prop("checked")){
        $d.show();
    }else{
    $d.hide();
  }
    
});