Develop Reference

How to select a <li> tag using JS

<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>
When the mouse is clicked manually, li border become red, but how to auto click it with JavaScript?

This will do what you want.
In CSS, define .clicked style with red border.
In javascript, add listeners to detect clicks, which then adds the class clicked to the element.
document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", function(event) {
event.target.classList.add("clicked");
});
});
<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover,
.sys_spec_text li .clicked { border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>

Please make it more clear. As I see from css, you show li border when it hovered. But then you ask about how to make the same with click. So it will lead to the situation when the element got border and further stay with it because there is no event to remove it.
Also you can use :active pseudo-class for anchor element that is the same as click js event.
If you want to immitate hover event you can listen to 'mouseenter'/'mouseleave' events to make the same as you did with css.
let listEls = [...document.querySelectorAll('.link')]
let firstLi = listEls[0]
/* === CLICK SECTION === */
// This is "click" event listener
listEls.forEach(e => {
e.addEventListener('click', event => {
console.log('link is clicked', event)
event.target.classList.add('selected')
})
});
// here we manually trigger "click" event on the first li
firstLi.click()
// The problem is that "selected" class has been added but if there is no method to remove it. Let's fix it
document.addEventListener('click', e => {
console.log(e)
if (!e.target.classList.contains('link')) {
listEls.forEach(el => el.classList.remove('selected'))
}
})
// Now if any li was clicked and has "selected" class, you can click anywhere else to remove it
/* === END CLICK SECTION === */
/* === HOVER SECTION === */
// To se how hover works comment the CLICK SECTION above and uncomment this HOVER SECTION
// DO not forget to comment hover rule for link in css
/*
listEls.forEach(e => {
e.addEventListener('mouseenter', e => {
console.log(e)
e.target.classList.add('selected')
})
});
listEls.forEach(e => {
e.addEventListener('mouseleave', e => {
e.target.classList.remove('selected')
})
});
*/
/* === END HOVER SECTION === */
.sys_spec_text {}
.sys_spec_text li {
float: left;
height: 28px;
position: relative;
margin: 2px 6px 2px 0;
outline: none;
list-style-type: none;
}
.sys_spec_text li a {
color: #db0401;
height: 24px;
padding: 1px 6px;
border: 1px solid #ccc;
background: #fff;
display: inline-block;
line-height: 24px;
}
/* If you want to check mouseenter/mouseleave events comment following block */
.sys_spec_text li a:hover {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
/* OR you can use :active pseudo-class, so then you have to disable js "click" event listener and comment :hover block above */
/*
.sys_spec_text li a:active {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
*/
.sys_spec_text li a.selected {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
<ul class="sys_spec_text">
<li><a class="link" href="javascript:void(0)" title="xl">xl</a><i></i></li>
<li><a class="link" href="javascript:void(0)" title="l">l</a><i></i></li>
</ul>

Use setInterval() method and check periodically and fire the event accordingly.

Toggle mobile navigation and adress data

Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!

I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/

Showing multiple tooltips on same element

I try to put tooltips on an element, that changes based on four buttons on the same page.
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;
}
This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.
How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.
Dr. Google didn't help.
Image for clarification :

You can change tooltip content with
$(".tooltip-selector").tooltip("option", "content", "New Content");
and bind this to your button's click

enter code here
$(document).ready(function(){
$('.btn1').click(function(){
$('.tooltip').addClass('btn1');
$('.tooltip').removeClass('btn2');
});
$('.btn2').click(function(){
$('.tooltip').addClass('btn2');
$('.tooltip').removeClass('btn1');
});
});
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;}
a.tooltip.btn1:hover span.btn1{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
a.tooltip.btn2:hover span.btn2{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" class="tooltip">1
<span class="btn1">1</span>
<span class="btn2">2</span>
</a>
<button class="btn1">1</button>
<button class="btn2">2</button>

After slide up action, font awesome icon does not display

The below code achieves a slide up and down action on the selected 'element' but for some reason after slide up, the fa-chevron-down font awesome icon does not display:
function showHideChatBox(element){
var e = jQuery(element).parents(".box1").children(".box1-body");
var t = 0;
if(jQuery(element).hasClass("collapse")) {
jQuery(element).removeClass("collapse").addClass("expand");
t = jQuery(element).children(".fa-chevron-down");
t.removeClass("fa-chevron-down").addClass("fa-chevron-up");
e.slideUp(200);
}
else {
jQuery(element).removeClass("expand").addClass("collapse");
t = jQuery(element).children(".fa-chevron-up");
t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
e.slideDown(200);
}
}

I don't think you are approaching this correctly, you should be referencing the toggle class to properly 'toggle' the font awesome chevron icons. Try using the jQuery toggle class like so:
JS
$(function () {
$('.dropdown_icon').click(function () {
$("#dropdown").slideToggle('fast');
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
});
});
Which is a simplified version of the answer to this question: Change class on inactive icon - jquery
HTML
<div id="header">
<ul class="hdr_link_icons">
<li class="dropdown_icon">
Dropdown<i class="fa fa-chevron-down"></i>
</li>
</ul>
<ul class="dropdown_area" id="dropdown">
<li>Your Account <span class="hdr_link_arrow">»</span></li>
<li>Corporate Sales <span class="hdr_link_arrow">»</span></li>
<li>Got a voucher? <span class="hdr_link_arrow">»</span></li>
</ul>
</div>
CSS
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }

ul li nested class jquery hover

I am trying to add mouse hover effect to a list having nested classes but no luck so far even after spending so many hours.
HTML:
<div class="pricing-wrap">
<ul class="pricing_main">
<li class="pricing pricing_three main">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
</ul>
</div>
...and here is the jquery I am trying to use for mouse hover
JQUERY:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pricing-wrap ul.pricing_main").hover(function () {
jQuery(this).find('li.pricing_three').addClass("main");
},
function () {
jQuery(this).find('li.pricing_three').removeClass("normal");
}
);
});
</script>
CSS:
.pricing-wrap{
overflow:hidden;
width:100%;
margin:20px 0 30px 0;
float:left;
}
.pricing_main{
overflow:hidden;
float:none;
margin:0 0 0 0;
width:100.5%;
padding:7px 0;
font-family:Arial, Helvetica, sans-serif !important;
}
li.pricing{
padding:0;
margin:20px 0 20px -1px;
float:left;
text-align:center !important;
border:1px solid #ddd;
position:relative;
}
li.main{
margin:0 0 0 -1px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index:1;
}
li.pricing:first-child{
margin-left:0;
}
li.pricing ul li{ padding:8px 0; margin:0 35px; border-top:1px dotted #eee;}
li.pricing ul li:first-child{border-top:none;}
li.pricing h2{
background:#ddd;
padding:10px 0;
margin:0;
font-size:20px;
border-bottom:1px solid #ddd;
font-weight:bold;
}
li.main h2{
background:#000;
color:#fff;
padding:21px 1px;
margin:-1px -1px 0 -1px;
border-bottom:none;
}
li.main{
border-color:#ccc;
}
.plan-head{ background:#f9f9f9; padding:20px 0 15px 0; border-bottom:1px solid #eee;}
.plan-price{ font-size:25pt; font-weight:bold; letter-spacing:-2px; line-height:1;}
.plan-bottom{ background:#f9f9f9; padding:15px 0; border-bottom:1px solid #eee;}
li.main .plan-bottom{padding:35px 0;}
.plan-bottom{ background:#f9f9f9; padding:25px 0; border-top:1px solid #eee;}
.plan-bottom a{ font-weight:bold; padding:8px 15px; background:#000; color:#fff !important; font-size:14px; opacity:.9}
li.main .plan-bottom a{padding:13px 22px; opacity:1}
.plan-bottom a:hover,
li.main .plan-bottom a:hover{}
li.pricing_three{
width:33%;
}
li.pricing_four{
width:24.7%;
}
You can check this live at www.modcansolutions.ca/#pricing
Any quick help will be appreciated.
Many thanks,
~ Dipak G.

jQuery(document).ready(function() {
jQuery(".pricing.pricing_three").hover(function() {
jQuery(this).addClass("main").removeClass("normal");
},
function() {
jQuery(this).removeClass("main");
});
});

your answer
jQuery(document).ready(function() {
jQuery(".pricing").hover(function () {
jQuery(this).addClass("main");
},
function () {
jQuery(this).removeClass("main");
}
);
});
or you can check jsfiddle