Develop Reference

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

Reorder divs with CSS? Insert parent 1 between children of parent 2

This is what I have:
<div class="container>
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
This is what I want:
<div class="container>
<div class="parent2">
<div class="child1"></div>
<div class="parent1"></div>
<div class="child2"></div>
</div>
</div>
Is this possible with only CSS or JavaScript (no jQuery)?
Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.

You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:
function reorder() {
document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}
.container * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.parent1 {
color: red;
border-color: red;
}
.child1 {
color: blue;
border-color: blue;
}
<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
I'm parent 2!
<div class="child1 ">I'm child 1!</div>
<div class="child2 ">I'm child 2!</div>
</div>
</div>
<button onclick='reorder();'>Reorder!</button>
Note: Css is only for better looks

With Javascript:
//Remove the parent 1 div from the container div
document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);
//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

To make this work, I would advise that you remove the div.parent2 around the child classes.
Therefore the code becomes
<div class="container parent">
<div clas="parent1"></div>
<div class="child1"></div>
<div class="child2></div>
</div>
then you can use flexbox to do this
.parent{display: flex};
.child1{order:1}
.parent1{order:2}

Select first div not in class name using jQuery

hello How do you find element not in this class name?
drop-area__itemPage
I use this but not working
$("#drop-area").children("div").find(".drop-area__item:not('.drop-area__itemPage:first')")
$("#drop-area").children("div").find(".drop-area__item")
div#page1.drop-area__item.ui-droppable.drop-area__itemPage
div#page2.drop-area__item.ui-droppable.ui-droppable-active
div#page3.drop-area__item.ui-droppable.ui-droppable-active
div#page4.drop-area__item.ui-droppable.ui-droppable-active
div#page5.drop-area__item.ui-droppable.ui-droppable-active
div#page6.drop-area__item.ui-droppable.ui-droppable-active
div#page7.drop-area__item.ui-droppable.ui-droppable-active
div#page8.drop-area__item.ui-droppable.ui-droppable-active
div#page9.drop-area__item.ui-droppable.ui-droppable-active
enter code here

Here is a snippet showing selection of first child which has one class and do not has another one:
$("#drop_area").find("div.class1:not([class~='class3']):first").css("border", "5px blue solid");
.class1, .class2, .class3{
display: inline-block;
margin: 20px;
width: 150px;
height: 80px;
}
.class1 {
background: teal;
}
.class2 {
background: tomato;
}
.class3 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop_area">
<div class="class1 class3 class2">class1 class3 class2</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class1">class1</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class3">class3</div>
<div class="class2">class2</div>
<div class="class3 class2">class3 class2</div>
<div class="class3 class1">class3 class1</div>
</div>
<div class="result"></div>
So result jquery statement looks like:
$("#drop-area .drop-area__item:not('.drop-area__itemPage'):first")

First select all related elements, than exclude with class .drop-area__itemPage and than use .eq(0) to select first of them:
$('#drop-area div .drop-area__item.:not(.drop-area__itemPage)').eq(0);

I'm taking a bit of a guess at what you're trying to do, but if you want to find the first child div of drop-area that does not have the class drop-area__itemPage, you can do this:
$(function() {
$("#drop-area").find(".drop-area__item").not('.drop-area__itemPage').first().css({
'color': 'red'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop-area">
<div id="page1" class=".drop-area__item ui-droppable drop-area__itemPage">1</div>
<div id="page2" class="drop-area__item ui-droppable ui-droppable-active">2</div>
<div id="page3" class="drop-area__item ui-droppable ui-droppable-active">3</div>
</div>

Changing text after a span

Is it possible in jquery to insert text after a span. For example, I would like to change the price value after the dollar sign below.
<div id="price">
<span>$</span>
10.00
</div>
The only way I can see how to do this, is to remove the span element (store as variable), add the price value, and then append the currency value again. Seems pretty hacky.

You can change the price using lastChild and nodeValue like following.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>
<script>
var price = $('#price')[0];
price.lastChild.nodeValue = "155.00";
</script>

Yes you can do it as:
$("#price").contents(":not(span)").text("Text");

Just add another span to wrap around the price value.
<div id="price">
<span>$</span>
<span id="price-value">10.00</span>
</div>
Then you can $("#price-value") to manipulate that part on its own.

One another way
<script src="http://code.jquery.com/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>
<script type="text/javascript">
$('#price').contents().last()[0].textContent=' 20.00';
</script>

As a much easier alternative, one might also use CSS to prepend the currency symbol. This avoids using the span altogether and allows changing the currency symbol.
CSS Examples:
.currency div::before { content: "$" }
.currency.yen div::before { content: "¥" }
And a working code snippet:
$('#item1').html('10.00');
$('#item2').html('8.80');
$('#item3').html( '20.30');
.currency.dollar div::before { content: "$" }
.currency.pound div::before { content: "£" }
.currency {
font-family: monospace;
font-size: 24px;
font-weight: bold;
border: 1px lightgray solid;
width: 8em;
padding: 4px;
text-align: right;
background-color: ghostwhite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="currency dollar">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>

try this
$("#pri").text("100");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
<span id='si'>$</span>
<span id='pri'>10.00</span>
</div>

Setting the text need some old fashioned JavaScript assistance. Using textContent.
$('#price').contents().filter(function() {
return this.nodeType == 3;
}).last()[0].textContent = 'changed';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>

You can try insertAfter() in jQuery.
HTML:
<button>Insert span element after span element</button>
<br>
<div id="price">
<span>$</span>
</div>
jQuery:
$(document).ready(function(){
$("button").click(function(){
$("<span>100</span>").insertAfter("span");
});
});

jquery toggle is not working

I have code like this,
<div class="wrapper">
<div class="box">
<h4 style="padding-left: 11px; padding-top: 15px;">Main title</h4>
<div class="hideunhide">
<h5 style="padding-left: 14px;">sub title1</h5>
<div class="horizontal controls">
</div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title2</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title3</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
</div>
</div>
</div>
When i click one the should be toggle(hide/unhide)
i have tried something like this,
$('.box').click(function() {
$(this).css('display', 'none')
$('.hideunhide').css('display', 'block')
});
But it is not working please help.
Fiddle: http://jsfiddle.net/ctrY4/

pelase have a look on below url
Fiddler!
$(function () {
$('.box').click(function () {
$('.hideunhide').slideToggle();
});
});

if you want to make .box class has to toggle then do like this..
$('.box').on('click',function(){
$('.hideunhide').toggle();
});

It seems that you hide a .box element, which is a parent of .hideunhide element. So if the parent element is hidden, all it's children are invisibile, regardless of their CSS display value.
You should reorganize your html.

Are you looking something like a toggle for the hideunhide?
Solution if it is a yes:
$('.box').click(function(){
$('.hideunhide').toggle();
});
Created a fiddle for the proposed solution: http://jsfiddle.net/ctrY4/1/

use code something like this :
$('.box').click(function(){
$('hideunhide').toggle();
});
*Before used to this correct your html code.

$('h4').click(function(){
$('.hideunhide').fadeOut(1000);
$('.hideunhide').fadeIn(1000);
});
This will hide and unhide .hideunhide elements in defined milliseconds interval when you click to h4.
Fiddle

By seeing you code, it seems you need to hide the <h4> tag. Try below.
$('.box h4').click(function(){
$(".hideunhide").slideToggle();
});
and fiddle