I have made a function so you can show/hide list items that are not used.
In my case I have a upload form in a list that the user uses every day, but most users only use 4-5 input fields of the existing 12, so now they can hide the input fields that the don´t use.
So it works like this.
- Click on the gear icon and a checkbox is displayed to the left of the input item.
- You select/check the fields that you want to hide and it saves the values in a localstorage.
- You click the ger icon again and it hides the checkboxes and the li:s that you selected.
- So the next time you load the page you have a much smaller list!
So to make this work, here it is.
The gear icon that I have in the navbar.
<i class="f7-icons color-gray edit-toggle">gear_alt</i>
Then I use the item-media div for the checkbox.
So the list looks like this where you need a unique id and the class cb.
<div class="item-media" style="display:none;"><label class="checkbox"><input type="checkbox" class="cb" id="chk1"><i class="icon-checkbox"></i></label></div>
And this css in my case.
.item-media{
height: 66px;
width: 40px;
}
So a list should look like this.
<li class="item-content item-input" style="padding-left:0px;">
<div class="item-media" style="display:none;">
<label class="checkbox">
<input type="checkbox" class="cb" id="chk1"><i class="icon-checkbox"></i>
</label>
</div>
<div class="item-inner" style="margin-left:0px;">
<div class="item-title item-label">Pris</div>
<div class="item-input-wrap">
<input type="number" name="pris" id="pris" placeholder="Pris" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
And the code in the .js file looks like this.
$$(document).on('page:init', '.page[data-name="uploadimages"]', function (e) {
var page = e.detail;
//show/hide checkboxes when click on .edit-toggle icon -----------------------
var flagga = true;
$$(document).on("click",".edit-toggle", function() {
if(flagga){
$$(page.el).find('.item-media').show();
$$(page.el).find('li').show();
flagga = false;
}else{
$$(page.el).find('.item-media').hide();
$$(page.el).find('.cb').each(function () {
if(localStorage && localStorage.getItem('myFavoriteList')){
var existing = localStorage.getItem('myFavoriteList');
// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];
for (var i = 0; i < existing.length; i++) { //loop over the collection
if (existing[i] === this.id) { //see if ids match
existing.splice(i, 1); //remove item from array
$$(this).prop("checked", true);
$$(this).closest('li').hide();
}
}
}
});
flagga = true;
}
});
//when you click on a checkbox------
$$(page.el).on("change",".cb", function() {
if(this.checked){
var existing = localStorage.getItem('myFavoriteList');
// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];
// Add new data to localStorage Array
existing.push(this.id);
// Save back to localStorage
localStorage.setItem('myFavoriteList', existing.toString());
}else{
var existing = localStorage.getItem('myFavoriteList');
// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];
for (var i = 0; i < existing.length; i++) { //loop over the collection
if (existing[i] === this.id) { //see if ids match
existing.splice(i, 1); //remove item from array
localStorage.setItem("myFavoriteList", existing);
break; //exit loop
}
}
}
});
//hide li:s when the page loads----
$$(page.el).find('.cb').each(function () {
if(localStorage && localStorage.getItem('myFavoriteList')){
var existing = localStorage.getItem('myFavoriteList');
// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];
for (var i = 0; i < existing.length; i++) { //loop over the collection
if (existing[i] === this.id) { //see if ids match
existing.splice(i, 1); //remove item from array
$$(this).prop("checked", true);
$$(this).closest('li').hide();
}
}
}
});
});
I´m sure that Vladimir can make it better/nicer, but it works 
and I hope you can use it.
Maybe it can be a new feature to include in the core Vladimir?