Develop Reference

Click outside of element to hide element

My code does this: when element .pencil is clicked on, it toggles the hidden element .pencilpanel. When clicked outside of this .test element (there are two .test elements), then this .pencilpanel should hide.
However, my problems are that:
1) When the second .test element is clicked on, the first .test element remains visible when it should be hidden. And,
2) When the first .pencil element is clicked on, and its corresponding .pencilpanel is also clicked on, it will hide .pencilpanel, when it's supposed to remain visible. Any element that is currently visible within .test, and if clicked on, should not be hidden, unless that clicked on element lies outside of the current .test element.
So I'm not getting why when a click is made on .pencilpanel, it hides it on this line if(!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {. And the fact that the first .pencilpanel remains visible when it should be hidden whenever another .pencil is clicked on. This is my code:
$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
});
});
$(document).ready(function () {
$(document).click(function () {
if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
$('.pencilpanel').removeClass("displayblock");
}
});
});
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

You can use the document.activeElement to check before you close the panels. Please find the modified code.
$(document).ready(function() {
$('.pencil').on('click', function(event) {
event.stopPropagation();
closePanel();
$(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
});
$(document).on("click", function() {
if (document.activeElement.tagName != 'TEXTAREA')
closePanel();
});
});
function closePanel() {
$('.pencilpanel').removeClass("displayblock");
}
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$('.pencilpanel').removeClass("displayblock");
$(this).parent().siblings().children(".pencilpanel").addClass("displayblock");
});
$(".pencilpanel").click(function () {
event.stopPropagation();
});
$(document).click(function () {
$('.pencilpanel').not(":focus").removeClass("displayblock");
});
});

$(document).ready(function () {
$('.pencilpanel').hide();
$('.pencil').on('click', function (event) {
event.stopPropagation();
var elm=$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel");
$('.pencilpanel').not(elm).hide();
if(elm.css('display') == 'none') elm.css('display','inline-block');
else elm.css('display','none');
});
$("*").on('click',function (event) {
event.stopPropagation();
if($(this).hasClass("pencil")) return;
if($(this).hasClass("pencilpanel")) return;
if($(this).parent().hasClass("pencilpanel")) return;
$('.pencilpanel').hide();
});
});
.pencil {
cursor: pointer;
}
.pencil, .pencilpanel {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
<br>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

Check if div-container has more than one div-inner no jQuery

I need a if else function that checks if div_container has more than one div_inner inside of it with Javascript only.
Here's my example code:
var inner = document.querySelector('.inner')
var container = document.querySelector('.container').innerHTML;
if(container > '1') {
container.classList.add('test');
}
else {
// do nothing
}
.test {
color: red;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>
I only want to use Javascript. No jQuery at all.

You have to use querySelectorAll() to get all the container and loop through them to check the inner div's length:
var container = document.querySelectorAll('.container');
container.forEach(function(el){
var inner = el.querySelectorAll('.inner').length;
if(inner > 1) {
el.classList.add('test');
}
else {
// do nothing
}
});
.test {
color: red;
background-color: lightgray;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>

You can use querySelectorAll()
for (const container of document.querySelectorAll('.container')) {
if (container.querySelectorAll('.inner').length > 1) {
container.classList.add('test');
}
}
.test {
color: red;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>

jQuery - progressivly showing div

I would like to show some divs, one by one, with a sliding effect from the left or right part of the screen. So far i'm stuck between this
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>
<script>
$(function() {
$('.left, .right').hide();
$('#animer').click(function() {
$(".left").toggle("slide", {direction: "left"}, 500);
$(".right").toggle("slide", {direction: "right"}, 500);
});
});
</script>
and that
<button id='animer'>animer</button>
<div class="all">from left</div>
<div class="all">from right</div>
<div class="all">from left</div>
<div class="all">from right</div>
<script>
$(function() {
$('.all').hide();
$('#animer').click(function() {
$('.all').first().show('slow', function showNextOne() {
$(this).next('.all').show('slow', showNextOne);
});
});
});
</script>
But i need this to work no matter the divs order, because the "left" or "right" items will come randomly.
Help will be much appreciated as i am not as competent as i wished in jQuery. ^^

The following uses the all variable to keep a list of all of the divs. When the button is clicked, the slideNext() function is executed, checking the class of the current item to decide on toggle direction, and specifying slideNext (itself) as the function to run when the toggle is complete.
$(function() {
var all = $('.left, .right').hide();
$('#animer').click(function() {
var i = 0;
(function slideNext() {
if (i < all.length) {
var current = all.eq(i);
current.toggle("slide", {
direction: current.hasClass("left") ? "left" : "right"
}, 500, slideNext);
}
i++;
})();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>

You can use index from each() loop for delay and set direction based on condition if current div hasClass() left or not.
$(function() {
$('div').hide();
$('#animer').click(function() {
$('div').each(function(i) {
let dir = $(this).hasClass('left') ? 'left' : 'right';
$(this).delay(i * 1000).toggle('slide', {direction: dir})
})
});
});
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<h1>HTML Slider Test</h1>
<button id='animer'>animer</button>
<div class="left">from left</div>
<div class="right">from right</div>
<div class="left">from left</div>
<div class="right">from right</div>

Javascript SlideUp with multiple div

Right now, I can only have one filter active. If I try to click on the other filter, it cancels the first one. How can I make them both stay active?
This is my code:
https://jsfiddle.net/0x43v59b/2/
html:
<div class="header-box">
<div class="header-click">
<h5>Publish Year</h5>
</div>
<div class="no-display">
<p>test1</p>
</div>
</div>
<div class="header-box">
<div class="header-click">
<h5>Condition</h5>
</div>
<div class="no-display">
<p>test2</p>
</div>
</div>
<script>
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});
</script>
css:
.header-click {
cursor: pointer;
}
.no-display {
display: none;
}
.header-box {
margin-bottom: 15px;
}

You just need to get rid of this line:
$parent_filter.siblings().find('.no-display').slideUp();
Its checking all siblings with class '.no-display' and sliding them up
<script>
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
//$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});
</script>

$('.header-click').on('click', function() {
$(this).parent().find('.no-display').slideToggle(500,'swing');
});

here is the updated jquery function:
$('.header-click').on('click', function() {
$parent_filter = $(this).closest('.header-box');
//$parent_filter.siblings().find('.no-display').slideUp();
$parent_filter.find('.no-display').slideToggle(500, 'swing');
});

You can use this code, works well for your condition:
$('.header-click').on('click', function() {
$parent_filter = $(this).next('.no-display');
if ($parent_filter.is(":hidden")) {
$parent_filter.slideDown();
} else {
$parent_filter.slideUp();
}
});
.header-click {
cursor: pointer;
}
.no-display {
display: none;
}
.header-box {
margin-bottom: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Year Filter -->
<div class="header-box">
<div class="header-click">
<h5>Publish Year</h5>
</div>
<div class="no-display">
<p>test1</p>
</div>
</div>
<!-- Condition Filter -->
<div class="header-box">
<div class="header-click">
<h5>Condition</h5>
</div>
<div class="no-display">
<p>test3</p>
</div>
</div>

All above answers look correct to me, Just one more way to achieve this.
$('.header-click').on('click', function() {
$(this).next(".no-display").slideToggle(500, 'swing');
});

Here is the script i made, hope this is exaclty what you want.
<script>
$(document).ready(function(){
$(document).on('click','.header-click',function(){
$(this).next().slideToggle(500,'swing');
});
});
</script>

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>