We Keep Coding

Change css attributes

Using DOM manipulation need to change this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
to this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: none;
}
Only using pure javascript functions. Any help is appreciated

You shouldn't aim to change the css but rather add or remove a class to the html element, which would correspond to a css with display:none.
Here is an example :
css :
.hidden { display:none; }
javascript :
document.getElementById("hideMe").classList.toggle("hidden");

You can use this, if you want pure javascript....
function changeCss(){
var selector = document.getElementById('your_selector')
selector.style.display = "none"
}
and then you can call it when you need to use it.
and you canuse this if you have access to some jquery
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').style('display' , 'none')
})
})
More so you can use classes (adding and removing) like this:
If you have your css like this :
.hidden{display : none}
then you can use this:
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').addClass('hidden')
})
})
and if you want to re-add the class
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').removeClass('hidden')
})
})
and then note that where I have used .on('click') you can as well use other kinds of events. Try and post back. Cheers!

$('.ul.tabbernav li').css('display', 'none');
More efficiently:
<script>
(function(){
$('.ul.tabbernav li').css('display', 'none !important');
})();
</script>

Find an element with a class in jquery

I have a scenario where I've multiple div with class navToME on/off. Now what I've trying to do here is if a div has a class off, then remove the class navToMe.
E.g.,
if($('.navToME').hasClass('off')){
$('.off').removeClass('navToME');
}
My HTML structure is like this:
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
What's happening right now is it just checks the first div with that class and returns false. Is there a way anyone can suggest so that I could just this for all classes inside my HTML? Thanks in advance!

You can simply use Class Selector to identify element with multiple class then use removeClass()
$('.off.navToME').removeClass('navToME');
$(function() {
$('.off.navToME').removeClass('navToME');
});
.on {
background-color: green;
}
.off {
background-color: red;
}
.navToME {
background-color: grey!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>

click to change background toggle

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks

JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE

You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/

how to hide image by its icon-value

hi everyone i cant find the solution for my question on google. i just want to hide the images using there icon-value
like in the below example i just want to hide the image which have icon-value="1" in the div which have .box class
<div class="box">
<div class="icon"><img src="xyz/smiley.png" icon-value="1" icon-index="0"></div>
<div class="icon"><img src="xyz/1.png" icon-value="2" icon-index="1"></div>
</div>

use an attribute selector.
.box img[icon-value="1"] {
display: none;
}

CSS solution:
.box img[icon-value="1"] {
display: none;
}
Demo
PS: Notice the value in quotes. I don't think CSS attribute selectors will work if the value is not specified in quotes
jQuery solution:
$(".box img[icon-value=1]").css("display", "none");
Demo

using css try following
.box .icon img[icon-value="1"] {
display: none;
}
or if you are using jquery you can try this also
$(".box img[icon-value=1]").hide();

hover on other tag element

I try to do hover on other tag element when mouse over on a element. but its not working, it is working when both elements are in same div tag.
html
<div id="wrap">
<div id="wrap1">
<div class="a" id='aa'>AAAA</div>
</div>
<div id="wrap2">
<div class ="b" id='bb'>BBBB</div>
</div>
</div>
css
.a {
color: red;
}
.b {
color: orange;
}
#aa:hover ~ #bb {
background-color: blue;
}
*Note:*I don't want to use jQuery.

This cannot be done in pure CSS, you will have to write some JS.
I suggest using jQuery since it makes these kinds of manipulations very easy e.g. in your case:
$('#aa').hover(
function() {
$('#bb').css('background-color','blue')
},
function() {
$('#bb').css('background-color','')
}
)
Demo: http://jsfiddle.net/9nN6W/
With a little more effort same can be done in plain vanilla JS as well, but why invent the wheel.
If you want to do this in pure CSS, elements have to be accessable via CSS, for example you can target the "wrap" DIVs:
#wrap1:hover ~ #wrap2 {
background-color: blue;
}
Demo : http://jsfiddle.net/9nN6W/1
By popular requests: Pure JS solution
document.getElementById('aa').addEventListener('mouseenter',
function() {
document.getElementById('bb').style.backgroundColor = 'blue';
}
)
document.getElementById('aa').addEventListener('mouseleave',
function() {
document.getElementById('bb').style.backgroundColor = '';
}
)
Demo 3: http://jsfiddle.net/9nN6W/2/

Javascript it is then :-)
document.getElementById("aa").onmouseover=function(){
document.getElementById("bb").style.backgroundColor="blue";
};
document.getElementById("aa").onmouseout=function(){
document.getElementById("bb").style.backgroundColor="";
};