Develop Reference

Refactoring jQuery repeating pattern

I have painted my self into a corner in order to quickly prototype.
What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.
Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.
Thank you!
// TOGGLING LEFT NAVIGATION
$('#settingsClick').click(function() {
if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#settingsContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#settingsContainer').slideToggle(350);
}
});
$('#addClick').click(function() {
if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#addContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#addContainer').slideToggle(350);
}
});
$('#noteClick').click(function() {
if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#noteContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#noteContainer').slideToggle(350);
}
});
$('#logoClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#logoContainer').slideToggle(350);
}
});
$('#themeClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#themeContainer').slideDown(350);
} else {
$('#themeContainer').slideToggle(350);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>
<br><br>
<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>
<br><br>
<p> Etc... Etc....</p>

You should group using the common CSS class, i.e. header and content. Using the established relationship you can target the others content holder and content associated with the current clicked header element.
$('.container .header').on('click', function() {
//Get the current element
var $this = $(this);
//find the content
var $content = $this.closest('.container').find('.content'); //$this.next()
//get all contents
var content = $('.container .content');
//Slide up others
content.not($content).slideUp(350);
//Slide down
$content.slideToggle(350);
});
.content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header" id="settingsClick">Click Me</div>
<div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="addClick">Click Me</div>
<div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="noteClick">Click Me</div>
<div class="content" id="noteContainer">Content...</div>
</div>

the best bet would be to do it like so
$(document).on('click', ".trigger", function() {
var sibling_content = $(this).siblings(".content");
if (!sibling_content.hasClass('active')) {
$(".content").slideUp('slow').removeClass('active');
sibling_content.slideDown('slow').addClass('active');
} else {
sibling_content.slideUp('slow').removeClass('active');
}
})
.trigger {
background-color: red;
color: white;
font-size: 16px;
}
.content {
background-color: blue;
color: white;
font-size: 16px;
padding: 20px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>

how to check if it was the last element

how can I check if it was the last div? If it was I need to remove all classes "ready"
html:
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
js:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var x = $("div:first").addClass("ready");
var c = $("div");
$(".ready").css("display", "block");
if (c.hasClass("ready")) {
$(".ready:last").next().addClass("ready");
}
}
})
;

Looking at your code what I understand is you want display one div after each second. For that I'll suggest following approach.
First add hidden class to all divs and then remove it from first hidden div at each second.
$(function() {
$('div').addClass('hidden');
var i = setInterval(showBlock, 1000);
function showBlock() {
var x = $("div.hidden:first").removeClass("hidden");
if($("div.hidden").length == 0) {
clearInterval(i);
}
}
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="green">Green</div>
<div class="orange">Orange</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="orange">Orange</div>

As far as I understand your problem, following solution must work in your case:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var ready_divs = $("div.ready").length;
var total_divs = $("div").length;
if(ready_divs!=total_divs){
if(ready_divs==0){
$("div:first").addClass('ready');
}else{
$("div.ready:last").next('div').addClass('ready');
}
}else{
$("div").removeClass('ready')
}
}
});
div{
width: 20px;
height: 20px;
border:1px solid red;
}
div.ready{
border:3px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>

detect click, check attribute value and text inside, and display element

I need to detect click of an element(.menuitem), check the text it contains.
And then based on the attribute(is-checked), hide or show other elements.
I need this only when clicking that other button.
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div></div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div></div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
$('.menuitem').click(function () {
if ($('.menuitem').text().trim() === "Button 2"){
if ($('[is-checked="true"]'))
$('.element').css('display', 'block');
if ($('[is-checked="false"]'))
$('.element').css('display', 'none'); }
});
Here's a JSFIDDLE, of what I have:

$('.menuitem').click(function() {
console.log($(this).text().trim())
if ($(this).text().trim() === "Button 2") {
if ($(this).attr('is-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
.items {
height: 30px;
margin-bottom: 5px;
}
.menuitem {
float: left;
margin-right: 10px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div>
</div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div>
</div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
<div class="element">even more content</div>
Use $(this).attr('is-checked') to get the value
Also use $(this).text().trim() to get the text of clicked element

You've got it a tad wrong, your if statement isn't actually looking at the element which was clicked. Try something along these lines:
$('.menuitem').click(function () {
// $(this) is a reference to the element which was clicked
if ($(this).attr('is-checked') == "true")
$('.element').css('display', 'block');
if ($(this).attr('is-checked') == "false")
$('.element').css('display', 'none');
});

jquery keypress to add class

I am trying to learn jquery keypress to add class system.
I have tryed the following code but it doesn't worked. I have tryed with an ID here. When started the #ttt1 then the the #rb1 background color should change but nothing happened.
What i am doing wrong or what i need to do here? Anyone can tell me ?
This id DEMO from codemep.io
$(document).ready(function() {
var ID = $(this).attr("id");
$("#ttt" + ID).on('keypress', function() {
if ($(this).val().length > 20) {
$("#rb" + ID).addClass("ad");
} else {
$("#rb" + ID).removeClass("ad");
}
});
});
HTML
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea>
</div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea>
</div>
<div class="br" id="rb2">Button</div>
</div>

You are defining a variable ID inside a function which occurs on $(document).ready(). Inside that function the value this will point to the document. What you need to do is to define the variable inside the keypress event handler function.
Use class for selection and then use $(this).attr("id") inside the handler function. Also you can use $(this).closest('div').next() to get the next element in the parent.
DEMO
$(document).ready(function() {
//here value for this is the document object and the id is not useful.
$(".test").on('keyup', function() {
//but here value for this is textarea where keypress event happened.
var ID = this.id;
if (this.value.length > 20) {
$(this).closest('div').next().addClass("ad");
} else {
$(this).closest('div').next().removeClass("ad");
}
});
});
.container {
margin:0px auto;
width:100%;
max-width:500px;
position:relative;
margin-top:100px;
}
.test {
outline:none;
border:1px solid red;
width:100%;
min-height:100px;
}
.br {
background-color:blue;
width:100px;
height:40px;
}
.ad {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea></div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea></div>
<div class="br" id="rb2">Button</div>
</div>

Setting background color of div on click

I have a set of dynamically generated div elements like:
<div on-click="selected">one</div>
<div on-click="selected">two</div>
<div on-click="selected">three</div>
<div on-click="selected">four</div>
<div on-click="selected">five</div>
<div on-click="selected">six</div>
<div on-click="selected">seven</div>
I want to change the background color of div on which it is clicked and lose it when another div is clicked.
I could achieve this using tabindex, but I want to retain it until I click it on the another div or clear it intentionally, which tabindex does not provide.
How can I acieve it using javascript?

<div class="radiodiv" onclick=selected(this)>one</div>
<div class="radiodiv" onclick=selected(this)>two</div>
<div class="radiodiv" onclick=selected(this)>three</div>
<div class="radiodiv" onclick=selected(this)>four</div>
<div class="radiodiv" onclick=selected(this)>five</div>
<div class="radiodiv" onclick=selected(this)>six</div>
<div class="radiodiv" onclick=selected(this)>seven</div>
<script>
var divItems = document.getElementsByClassName("radiodiv");
function selected(item) {
this.clear();
item.style.backgroundColor = 'red';
}
function clear() {
for(var i=0; i < divItems.length; i++) {
var item = divItems[i];
item.style.backgroundColor = 'white';
}
}
</script>

Put all Your 'divs' into one div which will be container.
Then, by js, loop trough them and set css for non-selected and different for selected.
code :
function sel(id) {
var divs=document.getElementById('container').getElementsByTagName('div'); //get all divs from div called container
for(var i=0;i<divs.length; i++) {
if(divs[i]!=id) { //if not selected div set .items css
divs[i].className='items';
}
}
id.className='selitem'; //set different css for selected one
}
/* css for non-selected div*/
.items
{
display:block;
width:200px;
background-color:white;
color:black;
cursor:pointer;
margin-bottom:5px;
}
.items:hover
{
background-color:blue;
color:white;
}
/* css for selected div*/
.selitem
{
display:block;
width:200px;
background-color:red;
color:yellow;
cursor:pointer;
margin-bottom:5px;
}
<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>
There is explanation in the code.

Try this:
<div onclick="selected(this)">one</div>
<div onclick="selected(this)">two</div>
<div onclick="selected(this)">three</div>
<div onclick="selected(this)">four</div>
<div onclick="selected(this)">five</div>
<div onclick="selected(this)">six</div>
<div onclick="selected(this)">seven</div>
<script>
function selected(element)
{
var divs=document.getElementsByTagName("div");
divs.forEach(function(i)
{
i.style.backgroundColor="auto";
});
element.style.backgroundColor="red";
}
</script>

FYI, without any loops.
var xxx = null;
function sel(element){
if(xxx != null){
xxx.className = "default";
}
element.className = "selected";
xxx = element;
}

The best way to do that, is called a function in JavaScript, onclick or another. In this function you can create your own code, try to change the CSS properties and you will change the background color.
One example that I created:
function onoverbut(elemento)
{
elemento.style.color= "silver";
elemento.style.fontSize= "25px";
}
name function: onoverbut
attribute: elemento, which is the class or id html, that you need to pass.