We Keep Coding

Remove and re-add Class Attribute inside a <div> unordered list item

This is the answer as i was able to solve.
Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.
$(document).ready(function () {
//remove Class
$('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');
//need to do add it to List Item which has Id =3
//check the list item which has id =3 if so add the class to it
// It is not a button click event.
$('#myJSTree li').each(function (i, li) {
console.log('<li> id =' + $(li).attr('id'));
var myIdVal = $(li).attr('id');
if (myIdVal == 3) {
$(this).addClass('jsTree-clicked');
}
});
});
.jsTree-clicked { background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked" . When you navigate to a different node it will remove and re-add the same class to the navigated node.
Expected
I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div.
AND
Re-add [class="jsTree-clicked"] to any ListItem by passing the Key i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.

$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>

Maybe this is helpful to you?
$(function () { $('#myJSTree').jstree(); });
const toggle = (e) => {
if (+$("#test").val()>=10 ) {
e.target.classList.remove("jstree-clicked");
console.log("You entered an invalid number.")
}
console.log(e.target)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10
I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.
It appears to me as if the class jstree-clicked (not: jsTree-clicked) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.
The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:
$(function () { $('#myJSTree').jstree(); });
const checkinput = (e) => {
if (+$("#test").val()>=10 ) {
console.log("You entered an invalid number.")
} else document.location.href=e.target.href;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.

How to get tab label text using ng-click?

Im looking for some solution to get tab label text on li ng-click. i'm using radio button for multiple options. suppose i click on local tab button and then selected poin to point radio button. im getting radio button value but i need category name also (local & outstation).
<ul class="tabs">
<li class="tab-link current" data-tab="tabs-1">LOCAL</li>
<li class="tab-link" data-tab="tabs-2">OUTSTATION</li>
</ul>
<div id="tabs-1" class="tab-content current">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box1-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Point to Point')" value="Point to Point" ng-model="selectCar.platform">
<label for="box1-fac-radio">Point to Point</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box2-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Hourly')" value="Hourly" ng-model="selectCar.platform">
<label for="box2-fac-radio">Hourly</label>
</div>
</div>
</div>
</div>
<div id="tabs-2" class="tab-content">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box3-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('One Way')" value="One Way" ng-model="selectCar.platform">
<label for="box3-fac-radio">One Way</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box4-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Round Trip')" value="Round Trip" ng-model="selectCar.platform">
<label for="box4-fac-radio">Round Trip</label>
</div>
</div>
</div>
</div>
Here is my app code for getting radio button value
var appModule = angular.module('cormobApp', []);
appModule.controller('selectCarCtrl', function($scope) {
$scope.radioPlatForm = function(platformChange) {
$scope.platformSelected = platformChange;
}

You can do this way.
Inside your HTML
<li class="tab-link current" data-tab="tabs-1" ng-click="TabName('Local')">LOCAL</li>
<li class="tab-link" data-tab="tabs-2" ng-click="TabName('Outstation')">OUTSTATION</li>
Inside your Controller
$scope.TabName= function(name) {
alert(name);// You can get selected tab name here
}

try to do it this way
on js
$scope.local = "LOCAL"
$scope.outstation = "OUTSTATION"
$scope.localfunction = function (local) {
$scope.platformSelected = local;
}
$scope.outstationfunction = function (outstation) {
$scope.platformSelected = outstation;
}
on html
<li class="tab-link current" data-tab="tabs-1" ng-click="localfunction('local')">{{ local }}</li>
<li class="tab-link" data-tab="tabs-2" ng-click="outstationfunction('outstation')>{{ outstation }}</li>

<span class="third-text-right" ng-if="selectCar.platform == 'Hourly' || selectCar.platform == 'Point to Point'">Local</span>
<span class="third-text-right" ng-if="selectCar.platform == 'One Way' || selectCar.platform == 'Round Trip'">Outstation</span>
I used two spans to show which tab is selected when clicking any sub option it will compare which radio button value match with condition it will show that span.
Thanks for prompt response guys. Thanks a lot

How do I keep a submenu open when clicked?

This was created by someone else, but some submenus stay open while one stays closed when clicked. I have an idea of what I can do, but I have very little knowledge of JS. I was thinking if sub5 (the id for the submenu that stays closed), "something to make it true, then false if not sub5" How can I do this?
HTML
<nav id="rightNav">
<div class="menutitle first" onClick="SwitchMenu('sub1')">fabrics</div>
<div id="sub1" class="submenu">
<ul>
<li>lee jofa</li>
<li>groundworks</li>
<li>threads</li>
<li>gp & j baker</li>
<li>mulberry home</li>
<li>baker lifestyle</li>
<li>blithfield</li>
</ul>
</div>
<!-- end div#sub1 (fabrics) -->
<div class="menutitle" onClick="SwitchMenu('sub2')">furniture</div>
<div id="sub2" class="submenu">
<ul>
<li>lee jofa upholstery</li>
<li>lee jofa occasionals</li>
<li>Bunny Williams Home</li>
<li>holland & co.</li>
<li>macrae</li>
<li>elle & marks</li>
</ul>
</div>
<!-- end div#sub2 (furniture) -->
<div class="menutitle" onClick="SwitchMenu('sub3')">wallcoverings</div>
<div id="sub3" class="submenu">
<ul>
<li>lee jofa</li>
<li>cole & son</li>
<li>groundworks</li>
<li>threads</li>
<li>gP & j baker</li>
<li id="blithfield-wall">blithfield</li>
<li>farrow & ball</li>
<li>lincrusta</li>
</ul>
</div>
<!-- end div#sub3 (wallcoverings) -->
<div class="menutitle">trimmings</div>
<div class="menutitle" onClick="SwitchMenu('sub5')">carpets</div>
<div id="sub5" class="submenu">
<ul>
<li>lee jofa carpet</li>
<li id="gw-carpet">groundworks</li>
<li>threads</li>
</ul>
</div>
<!-- end div#sub5 (carpets) -->
<div class="menutitle" id="archive-collection">designer collections</div>
<div class="menutitle last">archives</div>
</nav>
<!-- end nav#rightNav -->
JS
if (document.getElementById) { //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj) {
if (document.getElementById) {
var el = document.getElementById(obj);
var ar = document.getElementById("rightNav").getElementsByTagName("div"); //DynamicDrive.com change
if (el.style.display != "block") { //DynamicDrive.com change
for (var i = 0; i < ar.length; i++) {
if (ar[i].className == "submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
} else {
el.style.display = "none";
}
}
}

You have a class and a style.
Your style is defined in the class, so you can't access it with element.style.
A simple solution is to change this line:
<div id="sub5" class="submenu">
to
<div id="sub5" class="submenu" style="display:none;">

How to prevent Jquery click event?

am using Html and Jquery in my Project
Project Demo jsfiddle here
I have <ul> radio buttons in my HTML page as below
HTML Code
<ul class="featureBoxes paddingRight">
<li class="featuresHeading features liListTo">
<input type="radio" id="selectProvider" class="rd" name="rdbToList" value="1" />
<label for="selectProvider">
Radio 1
</label>
</li>
<li>
<ul class="featureListings ">
<li>
data 1
</li>
</ul>
</li>`
<li class="featuresHeading options liListTo">
<input type="radio" id="selectPatient" class="rd" name="rdbToList"
value="2" />
<label for="selectPatient">
Radio 2
</label>
</li>
<li>
<ul class="featureListings">
<li>
<div id="sptDiv" style="padding: 2px 0px 2px 8px;">
Data 2
</div>
</li>
</ul>
</li>
<li class="featuresHeading curtain-options liListTo">
<input type="radio" id="directEmail" class="rd" name="rdbToList"
value="3">
<label for="directEmail">
Radio 3
</label>
</li>
<li>
<ul class="featureListings ">
<li>
Data 2
</li>
</ul>
</li>
</ul>
and I am using Jquery for this to slideup and slide down.
Problem: when I click on radio buttons lable it slidedown for few seconds and again slideup as in above fiddle.
JavaScript
$(function () {
$("ul.featureListings").hide();
$(".featuresHeading").click(function (event) {
$(this).find('.rd').attr('checked', 'checked');
if ($(this).find('.rd').is(':checked')) {
$('ul.featureListings.demo').slideUp(300);
$(this).find('.rd').attr('checked', 'checked');
$('ul.featureListings.demo').not($(this).next().find('ul.featureListings')).removeClass("demo");
if ($(this).next().find('ul.featureListings').hasClass("demo")) {
$(this).next().find('ul.featureListings').removeClass("demo");
$(this).next().find('ul.featureListings').slideUp(300);
}
else {
$(this).next().find('ul.featureListings').addClass("demo");
$(this).next().find('ul.featureListings').slideDown(300);
}
}
//event.preventDefault();
return true;
});
});
Please give me suggestion how to prevent click event on <ul> and radio buttons ?
JSFiddle here

try
$("ul.featureListings").hide();
$(".featuresHeading [type=radio]").click(function (e) {
$("ul.featureListings").slideUp();
$(this).parent().next("li").find("ul").stop().slideDown(300);
});
NOTE: change click event to radio button not container. If you bind click event on container The click event call two times when using label for with radio button :example.check when name is clicked ,
DEMO

Use .prop('checked', true) instead of .attr('checked', 'checked') and dont handle "click" events from <label>. Example
$(function () {
$("ul.featureListings").hide();
$(".featuresHeading").click(function (event) {
if (event.target !== this && !$(event.target).is('input')) {
return;
}
$(this).find('.rd').prop('checked', true);
if ($(this).find('.rd').is(':checked')) {
$('ul.featureListings.demo').slideUp(300);
$(this).find('.rd').prop('checked', true);
$('ul.featureListings.demo').not($(this).next().find('ul.featureListings')).removeClass("demo");
if ($(this).next().find('ul.featureListings').hasClass("demo")) {
$(this).next().find('ul.featureListings').removeClass("demo");
$(this).next().find('ul.featureListings').slideUp(300);
}
else {
$(this).next().find('ul.featureListings').addClass("demo");
$(this).next().find('ul.featureListings').slideDown(300);
}
}
});
});

submenu on click must remain open

I have a vertical menu with some submenu items, and this submenu opens on click.
But the problem is that when I click on one of the submenu items, the submenu closes, whereas I want it to remain open, since when I browse on the submenu items
Here's the html:
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a></li>
<li>COLLECTIONS
<ul class="subnav" id="sub1" style="display:none">
<li class="first">spring/summer 2013
<li class="first">autumn/winter 2013
<li class="first">autumn/winter 2012
<li class="first">autumn/winter 2011
</ul>
</li>
<li>PORTRAIT</li>
<li>HERITAGE</li>
<li>PRESS</li>
<li>CONTACTS</li>
</ul>
</div>
and the js
function toggleID(IDS) {
var sel = document.getElementById('nav').getElementsByTagName('ul');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
sel = document.getElementById(IDS);
sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
}

<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="#"><strong>HOME</strong></a></li>
<li>COLLECTIONS
<ul class="subnav" id="sub1" style="display:none">
<li class="first">spring/summer 2013</li>
<li class="first">autumn/winter 2013</li>
<li class="first">autumn/winter 2012</li>
<li class="first">autumn/winter 2011</li>
</ul>
</li>
<li>PORTRAIT</li>
<li>HERITAGE</li>
<li>PRESS</li>
<li>CONTACTS</li>
</ul>
$("#test").click(function() {
var sel = document.getElementById('nav').getElementsByTagName('ul');
for (var i = 0; i < sel.length; i++) {
if (sel[i].id != 'sub1') {
sel[i].style.display = 'none';
}
}
sel = document.getElementById('sub1');
sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
});
Working Example

Is your problem thay you need to remember the visibility state of the submenu once you klick on the subitems?
If so, you need to remember the state of the submenu. You can accomplish this using cookies or localstorage.
Html (just small changes, like removing onclick and fixing html)
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a></li>
<li>COLLECTIONS
<ul class="subnav" id="sub1">
<li class="first">spring/summer 2013</li>
<li class="first">autumn/winter 2013</li>
<li class="first">autumn/winter 2012</li>
<li class="first">autumn/winter 2011</li>
</ul>
</li>
<li>PORTRAIT</li>
<li>HERITAGE</li>
<li>PRESS</li>
<li>CONTACTS</li>
</ul>
</div>
Javascript (using jquery with localstorage)
if(localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();
$('.subnav').parent().click(function () {
$(this).find('#sub1').toggle(); //<-- This toggles the menu open/close
// ** Remeber state ** //
if (localStorage.getItem("state") == "open") {
localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates
} else {
localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
}
// ** Remeber state ** //
});
My example uses jquery, if you have the possibility to start using it you should do so.
You can replace most of your javascript with a few lines using jquery
Check out working fiddle here
http://jsfiddle.net/urbanbjorkman/jGwnz/

Urban Bjorkman, I use your code but something is wrong...is that right?
<html>
<head>
<script type="text/javascript" >
if (localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();
$('.subnav').parent().click(function () {
$(this).find('#sub1').toggle(); //<-- This toggles the menu open/close
// ** Block to remeber state ** //
if (localStorage.getItem("state") == "open") {
localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates
} else {
localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
}
// ** Block to remeber state ** //
});
</script>
</head>
<body>
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a>
</li>
<li>COLLECTIONS
<ul class="subnav" id="sub1">
<li class="first">spring/summer 2013
</li>
<li class="first">autumn/winter 2013
</li>
<li class="first">autumn/winter 2012
</li>
<li class="first">autumn/winter 2011
</li>
</ul>
</li>
<li>PORTRAIT
</li>
<li>HERITAGE
</li>
<li>PRESS
</li>
<li>CONTACTS
</li>
</ul>
</div>
</body>
</html>