Develop Reference

how to change style display background image url

function btnclick() {
var btn = document.getElementById('M_menucol').style.display;
if (btn == 'none')
{
document.getElementById('M_menucol').style.display = 'block';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/cancel.png)";
}
else {
document.getElementById('M_menucol').style.display = 'none';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/menubtn.png)";
}
};
i want change display none to block and reverse + backgroundimage url
display change is working but background image change dont working
plz give me solution...
sorry for my bad english
I'm sorry my meaning was that when I click the button it opens a menu, and the button's image changes. Clicking the button again closes the menu and returns the image to its original state.
And I will study hard ;)
https://jsfiddle.net/phnzb10m/12/

Here is how I would do this:
function btnclick() {
var btn = document.getElementById('M_menucol');
if(btn != null) {
btn.classList.toggle("cancel")
}
};
The style.css file would contain something like this:
#M_menucol{
display: none;
background-image: url(.../image/menubtn.png);
}
.cancel{
display: block;
background-image: url(.../image/cancel.png);
}

In your fiddle why do you separated col, btn with comma when you setting the style of them ? i think you mean semicolon instead
In your fiddle the element id is Mmenubtn while you write it M_menubtn in the script
you should know that style is an object of elements so it's cannot output the style sets by style or link tags it's just output inline style or style sets to it by js
if you want to get style sets by style or link tags you will be need to use getComputedStyle() method
by default when there's no any inline style the values of style object properties is empty string so you can check if it's return empty string or none then execute you script
By Display Property
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (col.style.display === "" || col.style.display == 'none') {
col.style.display = 'block'
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none'
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}
By getComputedStyle() Method
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (getComputedStyle(col, null).display == 'none') {
col.style.display = 'block';
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none';
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}

Nest jQuery Inside Javascript Function To Fade In Div From Display:None

I have a solution for revealing div's based on their ID, but I would like it to fade in.
Due to the complexity of the page and the fact that it is inside of WordPress I want to modify this DOM function to include a .show("slow") to make the fade in work vs. reengineering the entire page.
Here is the code:
CSS Block
<style>
.biobox { display:none;}
</style>
JavaScript That I Want To Insert jQuery Into To FadeIn
var divs = ["one", "two"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
//the above line I want to swap with a jquery instance that includes .show("slow"), such as this code that does not work for me $(document).ready(function(){ $(div).show("slow"); });
} else {
div.style.display = "none";
}
}
}
</script>
DIV's That Are Hidden By Default
<div class="biobox" id="one">
<img src="http://deliveringhappiness.com/wp-content/uploads/2013/08/thought-leadership1.jpg" width="346" height="346" border="0" />
</div>
<div class="biobox" id="two">
<img src="http://www.traianbadulescu.ro/wp-content/uploads/2012/10/leaders.jpg" width="402" height="317" />
</div>
Code To Toggle DIV Visibility Of biobox
Close
Close
So how come $(document).ready(function(){ $(div).show("slow"); }); doesn't work in lieu of div.style.display = "block";? BTW I am inserting the jQuery onto the page prior to this code.

You'll need a different way of hiding your invisible div because you can't fade from display: none to another value for display, be it block, inline or inline-block.
You could transition the opacity or do something in combination with opacity, z-index or left/right offscreen hiding.

'href' Not Showing Output on Click

Im trying to have a href link expand/display extra text when clicked however when I click it nothing happens.
When I run the html code I can click on the link but it does not show the text for some reason.
Any idea why?
Heres the code:
<html>
click to expand
<div id="divID" style="display: none;">this is expanded</div>
</html>
I'm trying to keep the code as short as possible as the above code will have to be repeated hundreds of times for each link.

Assuming you're using jQuery, you are using the CSS selector incorrectly. Your line should be this:
click to expand
The # in #divID represents any element with an id of divID, whereas just using divID will search for divID tags (something like <divID></divID>)
See here for more documentation on the ID Selector and here's a list of all the CSS selectors you can use, including the Element Selector for you to understand why your previous code didn't work.
You can also combine CSS selectors to narrow your selection in the future, although it's not much necessary with an ID selector:
click to expand
And if you absolutely insist on not using jQuery:
click to expand
or breaking it out into its own function:
<script>
function toggleElementById(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
click to expand

Add this to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then:
$('#divID').toggle();

I see you're using jQuery, right? So I wrote your answer in jQuery..
$('.toggle').click(function () {
var selected = $(this).attr('href');
$('.expandable'+selected).toggle();
});
Check out the jsfiddle
If you're not using jQuery than here is the javascript version (html changed).
var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
var id = obj.dataset.toggle,
el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
Check out the jsfiddle

How do I filter an unorderded list to display only selected items using Javascript?

I have this JSFiddle where I am trying to make it so that the items in an unordered list are visible only if the option selected in a drop down matches their class. List items may have multiple classes, but so long as at least one class matches, the item should be made visible.
The Javascript looks like this:
function showListCategories() {
var selection = document.getElementById("listDisplayer").selectedIndex;
var unHidden = document.getElementsByClassName(selection);
for (var i = 0; i < unHidden.length; i++) {
unHidden[i].style.display = 'visible';
}
};
The idea is that it gets the current selection from the drop down, creates an array based on the matching classes, then cycles through each item and sets the CSS to be hidden on each one.
However, it's not working. Can anyone tell me where I'm going wroing?
Note that I haven't yet coded the "show all" option. I think I'll probably be able to figure that out once I have this first problem solved.

In your fiddle change load script No wrap - in <head>.
Just change your function like following
function showListCategories() {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
//above code to reset all lis if they are already shown
var selection = document.getElementById("listDisplayer").value;
lis = document.getElementsByClassName(selection);
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'block';
}
};
and in css it should be none not hidden
.cats, .rats, .bats {
display: none;
}
If you want to show all li when showAll is selected, add all classes to all lis.

You have a few things going on. First, your fiddle is not setup correctly, if you open the console you'll see:
Uncaught ReferenceError: showListCategories is not defined
This means that the function doesn't exist at the point you attach the event or that the function is out of scope, because by default jsFiddle will wrap your code in the onLoad event. To fix it you need to load the script as No wrap - in <body>.
Second, there's no such thing as a display:visible property in CSS. The property you want to toggle is display:none and display:list-item, as this is the default style of <li> elements.
Now, to make this work, it is easier if you add a common class to all items, let's say item, that way you can hide them all, and just show the one you want by checking if it has a certain class, as opposed to querying the DOM many times. You should cache your selectors, it is not necessary to query every time you call the function:
var select = document.getElementById('listDisplayer');
var items = document.getElementsByClassName('item');
function showListCategories() {
var selection = select.options[select.selectedIndex].value;
for (var i=0; i<items.length; i++) {
if (items[i].className.indexOf(selection) > -1) {
items[i].style.display = 'list-item';
} else {
items[i].style.display = 'none';
}
}
}
Demo: http://jsfiddle.net/E2DKh/28/

First there is no property in Css like display:hidden; it should be display: none;
here is the solution please not that i am doing it by targeting id finished
Js function
var selection = document.getElementById("listDisplayer");
var list = document.getElementsByTagName('li');
selection.onchange = function () {
var value = selection.options[selection.selectedIndex].value; // to get Value
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf(value) > -1) {
list[i].style.display = "list-item";
} else {
list[i].style.display = "none"
}
}
}
css Code
.cats, .rats, .bats {
display: none;
}
JSFIDDLE

You have many things wrong in your code and a wrong setting in the jsFiddle. Here's a working version that also implements the "all" option:
Working demo: http://jsfiddle.net/jfriend00/5Efc5/
function applyToList(list, fn) {
for (var i = 0; i < list.length; i++) {
fn(list[i], list);
}
}
function hide(list) {
applyToList(list, function(item) {
item.style.display = "none";
});
}
function show(list) {
applyToList(list, function(item) {
item.style.display = "block";
});
}
function showListCategories() {
var value = document.getElementById("listDisplayer").value;
var itemList = document.getElementById("itemList");
var items = itemList.getElementsByTagName("li");
if (value === "all") {
show(items);
} else {
// hide all items by default
hide(items);
show(itemList.getElementsByClassName(value));
}
}
Changes made:
You have to fetch the .value of the select to see what the value was of the option that was picked. You were using the selectedIndex which is just a number.
A common technique for displaying only a set of objects is to hide all of them, then show just the ones you want. Since the browser only does one repaint for the entire operation, this is still visually seamless.
When finding items that match your class, you should be searching only the <ul>, not the entire document. I added an id to that <ul> tag so it can be found and then searched.
To save code, I added some utility functions for operating on an HTMLCollection or nodeList.
Tests for the "all" option and shows them all if that is selected
Changed the jsFiddle to the Head option so the code is available in the global scope so the HTML can find your change handler function.
Switched style settings to "block" and "none" since "visible" is not a valid setting for style.display.

javascript hide/show example - close divs

In this javascript hide/show example, how can I close all other divs when a div is selected?
<script TYPE="text/JavaScript">
function show_hide(id, show)
{
if (el = document.getElementById(id))
{
if (null==show) show = el.style.display=='none';
el.style.display = (show ? '' : 'none');
}
}
</script>
& don't tell me to use jQuery, becuase it won't run in some mobile environments that we use.

I'd do it like this
var alldivs = document.getElementsByTagName("DIV");
for (var i=0;i<alldivs.length;i++){
var odiv = alldivs[i];
//we only need "other" divs, not the one we're working on
if ( (odiv.id) && (odiv.id!=id)) {
odiv.style.display="none";
}
}
(+ thanks for not asking for a jQuery solution:)