We Keep Coding

Targeting data attribute & running function issue

I'm trying to target different elements on the page by it's data-product, and setting a rule that if the data-product is a certain number then to run the function. But at the moment the functions runs multiple times and i'm not sure why this is.
var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
addMessage();
} else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
addMessage();
}
});
function addMessage() {
document.querySelectorAll('.product').forEach(function(el) {
el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
});
}
<div class="content" data-product="1">
<p class='product'>Product 1</p>
</div>
<div class="content" data-product="2">
<p class='product'>Product 2</p>
</div>
<div class="content" data-product="3">
<p class='product'>Product 3</p>
</div>
<div class="content" data-product="4">
<p class='product'>Product 4</p>
</div>

Your addMessage() function is adding the Sale text to all elements through the .forEach method. You should instead pass to it the element that needs to have .insertAdjacentHTML done to it and then inside the function only update that one element.
Here is a working example. Note that I have combined the two if-statements into one using the logical OR (||) operator.
const targetProduct = document.querySelectorAll('.content[data-product]')
targetProduct.forEach(function(el) {
const attr = el.getAttribute('data-product')
if ('1'.indexOf(attr) > -1 || '2'.indexOf(attr) > -1) {
addMessage(el)
}
})
function addMessage(el) {
el.insertAdjacentHTML('afterend', "<p style='color: red'>Sale</p>")
}
<div class="content" data-product="1">
<p class="product">Product 1</p>
</div>
<div class="content" data-product="2">
<p class="product">Product 2</p>
</div>
<div class="content" data-product="3">
<p class="product">Product 3</p>
</div>
<div class="content" data-product="4">
<p class="product">Product 4</p>
</div>

If you want to add a label to particular item, you could use this. Does it solve your problem?
var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
addMessage('1');
} else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
addMessage('2');
}
});
function addMessage(id) {
document.querySelectorAll('.content[data-product="' + id + '"] .product').forEach(function(el) {
el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
});
}
<div class="content" data-product="1">
<p class='product'>Product 1</p>
</div>
<div class="content" data-product="2">
<p class='product'>Product 2</p>
</div>
<div class="content" data-product="3">
<p class='product'>Product 3</p>
</div>
<div class="content" data-product="4">
<p class='product'>Product 4</p>
</div>

Animate one paragraph at a time

I have a div with several paragraphs inside of it. I want each of these paragraphs to fade in one after the other. I can do that with the following code. However, since I will have many more divs with many other paragraphs, each with their unique class names, I wonder if there is an easier way to achieve this, without keep copy-pasting the code, changing the class names each time.
$('.line1').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line2').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line3').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line4').css('visibility','visible').hide().fadeIn(1000);
});
});
});
.line1, .line2, .line3, .line4 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line1">Text 01</p>
<p class="line2">Text 02</p>
<p class="line3">Text 03</p>
<p class="line4">Text 04</p>
</div>

Class names don't matter here, you can use .line or .line{i} or anything else, as long as there is an easy way to select all of them.
If you want different class names you could use .div1 > p in place of .line in the code.
If slight (+/- few milliseconds) innaccuracies aren't an issue, you could use setTimeout for this.
$(".line").each(function (i) {
$(this).css("opacity", 0);
setTimeout(() => {
$(this).animate({ opacity: 1 }, 1000);
}, 1000 * i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line">Text 01</p>
<p class="line">Text 02</p>
<p class="line">Text 03</p>
<p class="line">Text 04</p>
</div>
You can also use .delay instead of setTimeout.
$(".line").each(function (i) {
$(this).css("opacity", 0).delay(1000 * i).animate({ opacity: 1 }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line">Text 01</p>
<p class="line">Text 02</p>
<p class="line">Text 03</p>
<p class="line">Text 04</p>
</div>

You can use delay to delay subsequent fadeIns, like this:
for (var n = 1; n <= 4; ++n) {
$(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).fadeIn(1000);
}
Live Example:
for (var n = 1; n <= 4; ++n) {
$(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).fadeIn(1000);
}
.line1, .line2, .line3, .line4 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line1">Text 01</p>
<p class="line2">Text 02</p>
<p class="line3">Text 03</p>
<p class="line4">Text 04</p>
</div>
Or with any list of class names:
["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
$("." + cls).css('visibility','visible').hide().delay(1000 * index).fadeIn(1000);
});
Live Example:
["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
$("." + cls).css('visibility','visible').hide().delay(1000 * index).fadeIn(1000);
});
.line1, .line2, .line3, .line4 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line1">Text 01</p>
<p class="line2">Text 02</p>
<p class="line3">Text 03</p>
<p class="line4">Text 04</p>
</div>

How to make this multi-slide panel loop indefinitely

I have three panels that have just text or text and images that I want to loop indefinitely, and be scalable from 1-1000 slides.
I have the following markup:
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>1.1</h1>
<p>slide 1.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.2</h1>
<p>slide 1.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.3</h1>
<p>slide 1.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>2.1</h1>
<p>slide 2.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.2</h1>
<p>slide 2.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.3</h1>
<p>slide 2.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>3.1</h1>
<p>slide 3.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.2</h1>
<p>slide 3.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.3</h1>
<p>slide 3.3</p>
<p class="datetime"></p>
</div>
</div>
</div>
And the following script:
<script>
$(document).ready(function() {
var items = $(".mb-panel"),
currentItem = items.filter(".active");
window.setInterval( function() {
var nextItem = currentItem.next();
currentItem.removeClass("active");
if( nextItem.length ) {
currentItem = nextItem.addClass("active");
} else {
currentItem = items.first().addClass("active");
}
}, 5000);
});
</script>
Unfortunately I am ending up with something like this:
Essentially, the first run of the panels work, but when it gets to the loops it stops for the other panels apart from column 1. I will be opening this up to allow the users to add as many notices per panel as they need, but require it to loop back to the beginning for each column once it reaches the last slide.

You have to pick the exact element with .eq(index) and change the index, depending - if it reached the max allowed length.
$('.mb-slider').each(function(){ // looping for each slider block
let panels = $(this).find('.mb-panel'); // collecting current slides
let len = panels.length;
let index = 0;
setTimeout(function loop(){
panels.eq(index).removeClass('active');
index = (index == len - 1) ? 0 : index + 1; // Google → Ternary operator
panels.eq(index).addClass('active');
setTimeout(loop, 1000);
}, 1000);
});
.mb-panel {
display: none;
border: 2px solid orange;
margin: 5px;
padding: 5px;
}
.mb-panel.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">1-1</div>
<div class="mb-panel">1-2</div>
<div class="mb-panel">1-3</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">2-1</div>
<div class="mb-panel">2-2</div>
<div class="mb-panel">2-3</div>
<div class="mb-panel">2-4</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">3-1</div>
<div class="mb-panel">3-2</div>
<div class="mb-panel">3-3</div>
<div class="mb-panel">3-4</div>
<div class="mb-panel">3-5</div>
</div>
</div>
I've used self-calling setTimeout chain just because like that trick. Here you can use setInterval as well. But in some cases, it make sense - not to call function repetitively, while the previous step haven't completed yet.
Translated into native JS ( find 10 differences :D ):
let slider = document.querySelectorAll('.mb-slider');
for( let i = 0; i < slider.length; i++ ){
let panels = slider[i].querySelectorAll('.mb-panel');
let len = panels.length;
let index = 0;
setTimeout(function loop(){
panels[index].classList.remove('active');
index = (index == len - 1) ? 0 : index + 1;
panels[index].classList.add('active');
setTimeout(loop, 1000);
}, 1000);
}
.mb-panel {
display: none;
border: 2px solid orange;
margin: 5px;
padding: 5px;
}
.mb-panel.active { display: block; }
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">1-1</div>
<div class="mb-panel">1-2</div>
<div class="mb-panel">1-3</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">2-1</div>
<div class="mb-panel">2-2</div>
<div class="mb-panel">2-3</div>
<div class="mb-panel">2-4</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">3-1</div>
<div class="mb-panel">3-2</div>
<div class="mb-panel">3-3</div>
<div class="mb-panel">3-4</div>
<div class="mb-panel">3-5</div>
</div>
</div>

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>

Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

Toggle multiple divs one at a time with 1 button using Jquery

I have four divs which i want to toggle one at a time with a single button. I want to toggle them one after the other and not randomly. I have tried something like below.
$(document).ready(function() {
$('#toggle').click(function() {
$('#1').hide();
});
$('#toggle').click(function() {
$('#2').hide();
});
$('#toggle').click(function() {
$('#3').hide();
});
$('#toggle').click(function() {
$('#4').hide();
});
});
.divs {
border: 1px solid;
height: 30px;
}
<div id='1' class='divs'></div>
<div id='2' class='divs'></div>
<div id='3' class='divs'></div>
<div id='4' class='divs'></div>
<button id='toggle'>
toggle
</button>

Save the state on each click.
$(document).ready(function() {
var state = 1;
$('#toggle').click(function() {
if(state==1){
$('#1').hide();
state=2;
}
else if(state==2){
$('#2').hide();
state=3;
}
else if(state==3){
$('#3').hide();
state=4;
}
else if(state==4){
$('#4').hide();
state=1; //back to state
}
});

$(document).ready(function() {
$('#toggle').click(function() {
$('.divs:visible:first').hide();
});
});

Try this one
var count = 1;
$(document).ready(function () {
$('#toggle').click(function(){
$('.divs').show();
if(count == 4)
count = 1;
$('#' + count).hide();
count++;
});
});

First of all, keeping numeric ids is not good, so considering you will change them after wards, I am writing both the answers with numeric ids and without numeric ids.
With Numeric Ids, it is easy to do.
Suppose you have button to toggle the other four divs then it would look like this:
var state = 1;
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Now coming to the non numeric ids.
var state = 1;
$("#toggleButton").click(function(){
$("#div"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='div1' >1</div>
<div id='div2' >2</div>
<div id='div3' >3</div>
<div id='div4' >4</div>
<button id="toggleButton">
toggle
</button>
FYI:In my opinion you should not use numeric ids.
Further adding more in to the code.
If you don't know how many div would be there but you are having a clear cut rule that the div's follow the sequence whether or not they are having numeric/non numeric ids then you can change the code slightly to incorporate that as well like this.
var state = 1;//first button id to be toggled
var total = 4;//this will be the total number of divs to be handled by the button
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===(total+1)){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Happy coding.

Use class instead of Id for using many times
var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>

loop through each element and use toggle. This gives the effect that you desire.
$('button').click(function(){
$('.divs').filter(function(index,item){
$(item).toggle('slow')
})
})
Have a look at this demo -
https://jsfiddle.net/ukw5wcmt/

var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
if(i==4)
{
i=1;
}else{
i++;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>
Try this

.hide{ display: none; }
$(document).ready(function(){
$(".click-btn").click(function(){
var fid = $(".hide:first").prop("id");
$("#"+fid).removeClass("hide");
});
$(".remove-tag").click(function(){
$(this).parent().addClass("hide");
});
});
<div id="cart-1" class="hide">
<div class="remove-tag">x</div>
<h5>1</h5>
</div>
<div id="cart-2" class="hide">
<div class="remove-tag">x</div>
<h5>2</h5>
</div>
<div id="cart-3" class="hide">
<div class="remove-tag">x</div>
<h5>3</h5>
</div>
<div id="cart-4" class="hide">
<div class="remove-tag">x</div>
<h5>4</h5>
</div>
<div id="cart-5" class="hide">
<div class="remove-tag">x</div>
<h5>5</h5>
</div>
<button class="click-btn">click</button>