Develop Reference

how to create a jQuery function with less code

I am trying to create a function in jquery. I have three boxes with three buttons. when I click a button then a box will display and other boxes will be hidden. same thing with the other button.
$("#one").click(function () {
$(".box1").show();
$(".box2").hide();
$(".box3").hide();
});
$("#two").click(function () {
$(".box2").show();
$(".box1").hide();
$(".box3").hide();
});
$("#three").click(function () {
$(".box3").show();
$(".box1").hide();
$(".box2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1" style="display:none">box one</div>
<div class="box2" style="display:none">box Two</div>
<div class="box3" style="display:none">box Three</div>
<button id="one" type="button">One</button>
<button id="two" type="button">Two</button>
<button id="three" type="button">Three</button>
my question is that is there any way to achieve my goal without repeat the same code multiple times.

There is a much easer approach to this, You could use Attributes.
Have a look below.
$(".container button").click(function(){
var className = "."+ $(this).attr("target");
$(".container div").hide() // hide all divs
// now view the target one
$(className).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box1" style="display:none">box one</div>
<div class="box2" style="display:none">box Two</div>
<div class="box3" style="display:none">box Three</div>
<button id="one" target="box1" type="button">One</button>
<button id="two" target="box2" type="button">Two</button>
<button id="three" target="box3" type="button">Three</button>
</div>

Here's a way that utilizes the ID of your buttons and the ID of your divs to make a dynamic function
$(".button").click(function(e) {
// set up the object to map stuff
let obj = {
'one': 'box1',
'two': 'box2',
'three': 'box3'
};
$(".box").hide();
$("." + obj[e.target.id]).show();
});
.box {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1 box">box one</div>
<div class="box2 box">box Two</div>
<div class="box3 box">box Three</div>
<button id="one" class='button' type="button">One</button>
<button id="two" class='button' type="button">Two</button>
<button id="three" class='button' type="button">Three</button>

When any button is clicked, hide all the messages. Then just show the message who's index within its class matches the index of the button within its group.
$("button").click(function (event) {
// Hide all the messages
$(".box").each(function(index, box){
$(box).hide();
});
// Show just the message that applies
$($(".box")[$("button").index(event.target)]).show();
});
.hidden { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box hidden">box One</div>
<div class="box hidden">box Two</div>
<div class="box hidden">box Three</div>
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>

You can simply use the jQuery :not() selector.
$("#one").click(function () {
$(".box1").show();
$("div:not(.box1)").hide();
});
$("#two").click(function () {
$(".box2").show();
$("div:not(.box2)").hide();
});
$("#three").click(function () {
$(".box3").show();
$("div:not(.box3)").hide();
});

Get next element with class (that's not a child or sibling)

With the press of a button, I want to toggle the class .active on the next div.bottom. These are basically accordions, but with a different structure.
Using nextElementSibling I guess won't work here to select the target element. How would one select such an element, that's neither a child nor a sibling (in plain JS)?
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>

I'd do it by using closest to go up to the container .wrapper element, then querySelector to find the bottom element:
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button && button.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>
Or the same thing using optional chaining (relatively new):
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button?.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>

By using closest() you can traverse the DOM upwards. With this it's easy to just get the relevant .bottom and toggle the active class on this element.
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', (e) => {
e.currentTarget.closest('.wrapper').querySelector('.bottom').classList.toggle('active');
});
});
.bottom {
display: none
}
.bottom.active {
display: block
}
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle</button>
</div>
</div>
<div class="bottom">Hidden content</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle 2</button>
</div>
</div>
<div class="bottom">Hidden content 2</div>
</div>

How to get number of div left after deleting?

In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

Show/hide div from separate links _ multiple boxes issue

I have managed to toggle a div with different links. But when i'm trying to make more boxes which the same it doesn't work anymore.
Imagine I have like 10 entries - all separated divs 'entry'
<div class="entry" id="1">
where i want to separately hide and show content with multiple links.
My Question is, I'm trying to fix this since 5 hours, but which one div entry its working, with more than one it is not working.
I tried to use
$(".entry").each(function() {
Here is my code:
$(document).ready(function() {
$(".entry").each(function() {
var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later
$(".menu1,.menu2,.menu3").click(function() {
var active_content = $(".lower_menu").data('content');
var cls = $(this).attr('class');
if (active_content == '') {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
} else {
if (active_content == cls) {
$('.lower_menu').html(b4c).data('content', '');
} else {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
}
}
});
});
});
.menu1 {height:40px; background-color:red;}
.menu2 {height:40px; background-color:green;}
.menu3 {height:40px; background-color:blue;}
.menu1_CONTENT {display:none; background-color:red;}
.menu2_CONTENT {display:none; background-color:green;}
.menu3_CONTENT {display:none; background-color:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry">
<div class="menu1">
<span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1
</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
<div class="entry">
<div class="menu1">BOX 1</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
... and a JSFiddle

it's a official bug of the jquery! We found one guys ! YEEEHAA

Javascript Toggle opening all divs [duplicate]

This question already has answers here:
jQuery toggle children of div
(4 answers)
Closed 4 years ago.
I'm trying to make an accordion and I'm using the same classes for each row. Like this.
$(document).ready(function() {
$(".faq-article").click(function() {
$(".faq-details").toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>
I can't remember how to prevent showing all the faq-details when clicking on the first question title.

You need to use this as context of your search for the .faq-details element.
$(document).ready(function() {
$(".faq-article").click(function() {
$(".faq-details", this).toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>

As there are multiple elements with class faq-article, when implementing toggle() on that class all elements are affected. To get the currently clicked element you have to target the current context of the click event by specifying this.
Change
$(".faq-details").toggle();
To
$(this).find(".faq-details").toggle(); OR $(".faq-details", this).toggle();
$(document).ready(function() {
$(".faq-article").click(function() {
$(this).find(".faq-details").toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>