We Keep Coding

Keep toggle state on different menu lists

I have a left navigation menu using lists for each menu item.
I am making it so that the user can hide/unhide certain sub menus on the whole menu.
Unfortunately, when you hide one sub menu and then refresh the page, each sub menu takes on this current state instead of just that one. (vice versa when unhiding).
HTML:
<div>
<h1 class="toggler">Messaging</h1>
<ul class="tree">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div>
<h1 class="tree-toggler">Information</h1>
<ul class="tree">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Script:
$(document).ready(function () {
if(localStorage.getItem("toggleState") == "1")
$('ul.tree').hide();
$('h1.toggler').click(function () {
var ts = localStorage.getItem("toggleState");
if(ts == null || ts == "0") {
var tv = "1";
localStorage.setItem("toggleState", tv);
}else {
var tv = "0";
localStorage.setItem("toggleState", tv);
}
$(this).parent().children('ul.tree').toggle(300);
});
});
How can I make it so that my code saves the state for each individual sub menu list chosen to hide/unhide?

<style> .toggler {cursor: pointer} </style>
<div>
<h1 class="toggler">Messaging</h1>
<ul class="tree">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div>
<h1 class="toggler">Information</h1>
<ul class="tree">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var clientStates = [];
$(document).ready(function () {
$('h1.toggler').click(function (e) {
$(this).parent().children('ul.tree').toggle(300);
setTimeout(function() {saveLocalStorage();}, 350); // wait until the animation is over, then save the state
});
loadLocalStorage();
});
function loadLocalStorage() {
toggleState = JSON.parse(localStorage.getItem("toggleState"));
if(typeof toggleState === 'object' ) {
clientStates= toggleState;
}
for(var i in clientStates) {
if(clientStates[i]) {
$('h1.toggler').eq(i).parent().children('ul.tree').show();
}
else {
$('h1.toggler').eq(i).parent().children('ul.tree').hide();
}
}
}
// read from the DOM if elements are visible or not. Save to localStorage
function saveLocalStorage() {
clientStates = [];
$('h1.toggler').each(function() {
if( $(this).parent().children('ul.tree').is(":visible") ) {
clientStates.push(true);
}
else {
clientStates.push(false);
}
});
localStorage.setItem("toggleState", JSON.stringify(clientStates));
}
</script>
Just a remark: the children of an UL should be LI elements, so put the A inside the LI

moving lists into other lists

so i have some html like this. ive added some classes for some clarity but their names are irrelevant. on mobile i want "sub-nav" to be a child of the "mobile parent" li. ive got it to appear after the li but not within it in the DOM structure. what am i missing? ive been messing around with the js, hasnt worked.
<ul class="main-nav">
<li>link 1</li>
<li>link 2</li>
<li class="mobile-parent>link 3</li>
</ul>
<ul class="sub-nav mobile-child">
<li>link 1</li>
<li>link 2</li>
</ul
let trigger = document.getElementById('trigger');
let nav = document.querySelector('.site-navigation');
let mobileChild = document.querySelector('.mobileChild');
let mobileParent = document.querySelector('.mobileParent');
trigger.addEventListener('click', function(){
trigger.classList.toggle('active');
if (trigger.classList.contains('active')) {
nav.classList.add('active');
} else {
if (nav.classList.contains('active')) {
nav.classList.remove('active');
}
}
});
if (window.innerWidth < 768) {
mobileParent.appendChild(mobileChild);
}

You can use the media query to show and hide elements for different devices.
Please refer the below code. And also refer this post.
.mobile-child-outer{
display:block;
}
.mobile-child{
display:none
}
#media screen
and (device-width: 360px)
and (device-height: 640px) {
.mobile-child-outer{
display:none;
}
.mobile-child{
display:block
}
}
<ul class="main-nav">
<li>link 1</li>
<li>link 2</li>
<li class="mobile-parent">link 3
<ul class="sub-nav mobile-child">
<li>link 1</li>
<li>link 2</li>
</ul>
</li>
</ul>
<ul class="sub-nav mobile-child-outer">
<li>link 1</li>
<li>link 2</li>
</ul>
Update
If you want the JS solution try the below. But, I don't think JS is a best solution for this, as you can achieve it with CSS.
window.addEventListener("resize", addSubNav);
function addSubNav(){
var width = document.body.clientWidth;
if (width < 768) {
document.querySelector('.mobileParent .mobile-child').remove();
mobileParent.appendChild(mobileChild);
}
}

JQuery mobile changing element between list

I have two lists and when clicked on one element I want to remove it from this list and add it to a second one.
<div id="ul1">
<ul id="selected">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="list2">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>
I am not a jQuery dev and I can't have this working properly.
$("#ul1 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
$("#selected").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
function add2(p1){
$("#list2").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
I would really appreciate if someone could point out the correct solution to accomplish this.
Here is a demo.
Thanks

Just use appendTo method.
$("#ul1").on('click', 'a', function(){
$(this).closest('li').appendTo('#list2');
return false;
});
$("#ul2").on('click', 'a', function(){
$(this).closest('li').appendTo('#selected');
return false;
});

Have a look at this snippet. It checks the click() event of the anchor inside the li, looks for the li by matching the father of the element.
$(document).ready(function() {
$('#select li a').each(function(index, anchor) {
// Let's add a click listener
$(anchor).click(function(){
// Let's find the father li
$(this).closest('li').appendTo('#append');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ul1">
<ul id="select">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="append">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>

Try this way :
$("#ul1 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
("#list2").append(p1);
return false;
}
function add2(p1){
$("#list2").append(p1);
return false;
}

try:
function move(ul1,ul2) {
$('body').on('click',ul1+" a", function(){
$(ul2).append($(this).parent('li'));
//$(this).parent('li').remove();
return false;
});
};
move('#selected','#list2');
move('#list2','#selected');
https://jsfiddle.net/x9LL1ubc/2/

Find specific string in a div and delete its html element

is there a way using javascript to find a specific string and delete its' html element.
For example, I have this following html code:
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
and I want to hide "Text 2", first I want to find this string and then hide it.
what I've tried is using html().replace but it hides only the text not the element.
JSFiddle

In jQuery there is :contains
$('.summary li:contains(Text 2)').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>

Your fiddle is pretty close. Here's an updated version removing the element from the DOM.
$('.summary li').each(function() {
var $this = $(this);
if ($this.text() === 'Text 2') {
$this.remove();
}
});
http://jsfiddle.net/sLa3dkdd/3/

Iterrate over li elements, check if the text content is the searched value, then hide or remove the element.
$(function() {
$('.summary li').each(function() {
var $this = $(this);
if($this.text() === 'Text 2'){$this.hide();}
});
});

using JQuery you can do it like that :
$('.summary ul').children().each(function () {
if($(this).text() == searchedValue) {
$(this).hide();
}
})

Javascript/jQuery - On hover over a li element, change class of another li element

i am having some trouble with the menu bar on this website: http://www.re-generation.ro/ro/campanii/minerit-aurifer .
Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element becomes blank and on on hover out, it becomes active again. If you visit the link you can easily understand what i what.
If you need any information pls ask.
thank you in advance!
My code:
var lis = document.getElementsByTagName('ul');
for (var i=0, len=lis.length; i<len; i++){
lis[i].onmouseover = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = '';
var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]);
ul.className = '';
};
lis[i].onmouseout = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = 'active';
};
};
EDIT: Thank you all for your answers! That really helped!

The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.
$('#menu').on('mouseover', '> li', function(e) {
# attach hover event to the menu, and check which LI you are hovering
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').removeClass('active');
}
}).on('mouseout', '> li', function (e) {
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').addClass('active');
}
});
Here you are selecting just the direct descendants and updating the class, provided it's not the currently active list item.

HTML:
<ul id="menu">
<li>Item 1</li>
<li class="current active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>​
JavaScript:
$('#menu li').on('mouseover', function() {
var li$ = $(this);
li$.parent('ul').find('li').removeClass('active');
li$.addClass('active');
})
.on('mouseout', function() {
var li$ = $(this);
li$.removeClass('active');
li$.parent('ul').find('li.current').addClass('active');
});​
DEMO

I would use JQuery for this. Something like this:
$('li').hover(function(){
$('li.active').removeClass('active').addClass('normal');
});
$('li').mouseleave(function(){
$('li.normal').removeClass('normal').addClass('active');
});

What you're missing is a way to remember what the default state is. Here is my answer, and a Fiddle
HTML:
<ul class="menuWithDefault">
<li>Link One</li>
<li class="active">Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
Javascript:
$(".menuWithDefault").each(function() {
var defaultItem = $(this).find(".active").first();
$(this).find("li").hover(function() {
defaultItem.toggleClass('active', false);
$(this).toggleClass('active', true);
}, function() {
$(this).toggleClass('active', false);
defaultItem.toggleClass('active', true);
});
});​
​

$(document).ready(function(){
$('li').hover(function(){
$(this).addClass('active').siblings().removeClass('active')
});
});
li.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>