We Keep Coding

Show/Hide the same div and close all other divs

I am trying to write a code when click on the link it toggleSlide the relevant div and hide all other divs. But the issue I am facing, when I click to close same div then it reopens.
jQuery(document).ready(function($){
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian(){
var _this = $(this);
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
_this.toggleClass('opened');
filters.slideToggle();
}
});
.facetwp-facet {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>

Basic we have to check if the one you click on already is "opened"
var opened = _this.hasClass("opened");
Then we can use that to determent if we shall toggle the class or not.
if (!opened) {
_this.toggleClass('opened');
filters.slideToggle();
}
Demo
jQuery(document).ready(function($) {
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian() {
var _this = $(this);
var n = _this.hasClass("opened");
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
if (!n) {
_this.toggleClass('opened');
filters.slideToggle();
}
}
});
.facetwp-facet {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>

pass a div content to jquery

how can I strip the quotes and pass the hex value to jquery so each values can be used as background color?
<div class="someclass"> " #ffff1 " </div>
<div class="someclass"> " #ffff2 " </div>
<div class="someclass"> " #ffff3 " </div>
<div class="someclass"> " #ffff4 " </div>
<div class="someclass"> " #ffff5 " </div>
<script type="text/javascript">
$(document).ready(function() {
$(".someclass").hover(
function() {
//mouse over
$(this).css('background', '*pass it here*')
}, function() {
//mouse out
$(this).css('background', '')
});
});
</script>

You could also do:
$(this).css('background', this.innerHTML.replace(/[" ]/g, ''))
The code above, explained:
this.innerHTML = Gets the div's inside content
/[" ]/g = Regex grabbing all quotes (") and spaces ()
.replace() = Function used to remove what is found by the regex, leaving only the HEX code of your color.

This should work :
<div class="someclass"> " #ffff1 " </div>
<div class="someclass"> " #ffff2 " </div>
<div class="someclass"> " #ffff3 " </div>
<div class="someclass"> " #ffff4 " </div>
<div class="someclass"> " #ffff5 " </div>
<script type="text/javascript">
$(document).ready(function() {
$(".someclass").hover(
function() {
//mouse over
$(this).css('background', $(this).html().replace(/\"/g , ""));
}, function() {
//mouse out
$(this).css('background', '')
});
});
</script>

This checks to see if there are quotes or not, so they are optional.
$(document).ready(function() {
$(".someclass").hover(
function() {
//mouse over
var color = $(this).html().trim();
if(color[0] === '"' && color[color.length-1] === '"'){
color = color.substring(1, color.length-2).trim();
}
$(this).css('background', color)
}, function() {
//mouse out
$(this).css('background', '')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass"> " red " </div>
<div class="someclass"> " #000 " </div>
<div class="someclass"> " #000123 " </div>
<div class="someclass"> " #123123 " </div>
<div class="someclass"> green </div>

You can do this
textColor = $(this).html(); //get text
textColor= textColor.replace('"',''); //remove the quotes
textColor= textColor.replace(/\s+/g, ''); //remove spaces
$(this).css('background', textColor); //use

Use regex to extract just the #xxxxxx part and remove the rest:
var color = /#[0-9a-f]+/.exec($(this).html())[0];
$(this).css('background', color)
Also, you only have 5 characters for the colors, normally should be 6 characters.
$(document).ready(function() {
$(".someclass").hover(
function() {
var color = /#[0-9a-f]+/.exec($(this).html())[0];
$(this).css('background', color)
}, function() {
$(this).css('background', '')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="someclass"> " #ff0011 " </div>
<div class="someclass"> extra things " #ff0022 " </div>
<div class="someclass"> " #aaff00 " some other things </div>
<div class="someclass">123 " #ff00ff " 456</div>
<div class="someclass"> " #002233 " </div>

Simply put this code
$(".someclass").hover(function() {
$(this).css('background-color', $(this).html().replace('"','').replace(' ',''));
}
, function() {
$( this ).css( 'background-color', '');
}
);

Another way would be to split the string and extract the hex code:
let color = $(this).html().split(' ')[2];
$(this).css('background', color);
$(document).ready(function() {
$(".someclass").hover(
function() {
//mouse over
let color = $(this).html().split(' ')[2];
$(this).css('background', color);
}, function() {
//mouse out
$(this).css('background', '')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass"> " #ffff12 " </div>
<div class="someclass"> " #aaff23 " </div>
<div class="someclass"> " #bbff34 " </div>
<div class="someclass"> " #ccff45 " </div>
<div class="someclass"> " #ddff56 " </div>

Get the color code using regex with help of String#match method.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">" #ffff10 "</div>
<div class="someclass">" #ffff20 "</div>
<div class="someclass">" #ffff30 "</div>
<div class="someclass">" #ffff40 "</div>
<div class="someclass">" #ffff50 "</div>
<div class="someclass">" #156 "</div>
<script type="text/javascript">
$(document).ready(function() {
$(".someclass").hover(
function() {
//mouse over
$(this).css('background', $(this).text().match(/#(?:[\da-f]{6}|[\da-f]{3})/i)[0])
}, function() {
//mouse out
$(this).css('background', '')
});
});
</script>

replace $(this).css('background', '*pass it here*') with
$(this).css('background', $(this).html())

How To Remove One Element From a Class with Lots Of Elements?

I have multiple .note and I want to be able to click on .remove (which is in each .note) and it will remove the .note that the .remove that I clicked was in. I've used .closest() to do that, but it will only work for the first note, and not the other ones after that. Thanks in advance!
Here is the code:
The code that removes the .note:
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});
HTML:
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item"></textarea>
<div class="saved"><span class="msg"></span>
</div>
</div>
</body>
JS:
$('.note').click(function (event) {
event.preventDefault();
});
$('#wrp, #wrapper').click(function showNote() {
$('.note').fadeIn();
});
$(function () {
$(document).mousedown(function (event) {
// only proceed if clcik is not anywhere in a note element
if (!$(event.target).closest('.note').length) {
var note2 = $('.note').first();
note2.clone().insertBefore(note2);
console.log(note2);
}
});
});
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});
window.onload = function () {
var input = $("#item").focus();
};
function date() { //code indentation
var now = new Date();
now2 = now.getMonth() + 1 + '/' + now.getDate() + '/' + now.getFullYear() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$('.time').html(now2);
}
date();
var autosaveOn = false;
function myAutosavedTextbox_onTextChanged() {
if (!autosaveOn) {
autosaveOn = true;
$('.item').everyTime("3000", function () {
$.ajax({
type: "POST",
url: "/echo/html/",
data: "id=1",
success: function (msg) {
$('.msg').text(Saved);
alert("saved");
}
});
}); //closing tag
}
}
$(".note").closest('.note').draggable();
$(function () {
$("#tabs").autoSave(callback, ms);
});
$(".item").autoSave(function () {
var time = new Date().getTime();
$("#msg").text("Draft Autosaved " + time);
}, 500);

It looks like you have one note and then you are cloning it when you click on something other than the note and inserting it next to the previous note. Since you are only binding to the first note you need to use a live function. E.g. something like
$('body').on('click', '.remove', function() {
$(this).closest('.note').remove();
});

since you know that your .remove element is a direct child of the .note, you can just select its parent:
$('.remove').click(function () {
$(this).parent().remove();
});
if the .remove element is NOT a direct child of the .note, you can do this:
$('.remove').click(function () {
$(this).parents(".note").remove();
});
IMPORTANT:
if your notes are generated dynamically, then you will need to utilize event delegation, by attaching the click handler to the wrapper instead of the .remove buttons, and fire when elements with class .remove are clicked inside the wrapper:
$('#wrapper').on("click",".remove",function () {
$(this).parent().remove();
});

Do this:
$('.remove').click(function () {
$(this).closest('.note').remove();
});
That will remove only the closest note, as the closest() function already selects the elements anyway. If you pass a parameter to remove() it will search for all elements that match it, but if you use it on an already selected node, it will remove that node.
DOCS: https://api.jquery.com/remove/

Here is a possible solution. Possibly I am late... got distracted while typing the answer.
$('.remove').on('click', function(){
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note1</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note2</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note3</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note4</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note5</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
</div>
</div>
</body>

Jquery - Get div number from a list by hovering

How can a get the number by hovering mouse over the div?
HTML
<div id="log"></div>
<div id="myList">
<div class="divHV">One </div>
<div class="divHV">Two</div>
<div class="divHV">3 </div>
<div class="divHV">Blub </div>
<div class="divHV">Peter</div>
<div class="divHV">6 House</div>
<div class="divHV">last one is 7</div>
</div>
JS
$(document).ready(function() {
$('.divHV').hover(function()
{
XX = '';
$('#log').html('This is the div number '+XX+' <br />');
}, function ()
{
$('#log').html('');
});
});
Working exmaple
http://jsfiddle.net/9R4aC/2/

XX = $(this).index();
but that will start from 0 you can add +1 if you want..
http://jsfiddle.net/9R4aC/2/

$(document).ready(function() {
$('.divHV').each(function(i) {
$(this).hover(function() {
XX = i;
$('#log').html('This is the div number ' + XX + ' <br />');
}, function() {
$('#log').html('');
});
});
});
http://jsfiddle.net/9R4aC/3/

drag and drop working funny when using variable draggables and droppables

i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina

Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})