Develop Reference

Link simillary name classes so that when one is clicked the other is given a class

Basically, I'm asking for a way to optimize this code. I'd like to cut it down to a few lines because it does the same thing for every click bind.
$("#arch-of-triumph-button").click(function(){
$("#arch-of-triumph-info").addClass("active-info")
});
$("#romanian-athenaeum-button").click(function(){
$("#romanian-athenaeum-info").addClass("active-info")
});
$("#palace-of-parliament-button").click(function(){
$("#palace-of-parliament-info").addClass("active-info")
});
Is there a way to maybe store "arch-of-triumph", "romanian-athenaeum", "palace-of-parliament" into an array and pull them out into a click bind? I'm thinking some concatenation maybe?
$("+landmarkName+-button").click(function(){
$("+landmarkName+-info").addClass("active-info")
});
Is something like this even possible?
Thanks in advance for all your answers.
EDIT: Here's the full HTML.
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Arch of Triumph</span>
</div>
<div class="landmark-button" id="arch-of-triumph-button"></div>
</div>
</div>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Romanian Athenaeum</span>
</div>
<div class="landmark-button" id="romanian-athenaeum-button"></div>
</div>
</div>
----------------------------------------------------------
<div class="landmarks-info-wrapper">
<div class="landmark-info" id="arch-of-triumph-info">
<div class="info-landmark section">
<span class="landmark-title">Arch of Triumph</span>
<span class="landmark-coord">44°28′1.99″N 26°4′41.06″E</span>
</div>
</div>
<div class="landmark-info" id="romanian-athenaeum-info">
<div class="info-landmark section">
<span class="landmark-title">The Romanian Athenaeum</span>
<span class="landmark-coord">44.4413°N 26.0973°E</span>
</div>
</div>

Assuming you're not able to modify your HTML markup (in which case with use of CSS classes would be cleaner), a solution to your question would be as shown below:
// Assign same click handler to all buttons
$("#arch-of-triumph-button, #romanian-athenaeum-button, #palace-of-parliament-button")
.click(function() {
// Extract id of clicked button
const id = $(this).attr("id");
// Obtain corresponding info selector from clicked button id by replacing
// last occurrence of "button" pattern with info.
const infoSelector = "#" + id.replace(/button$/gi, "info");
// Add active-info class to selected info element
$(infoSelector).addClass("active-info");
});

Because each .landmark-button looks to be in the same order as its related .landmark-info, you can put both collections into an array, and then when one is clicked, just find the element with the same index in the other array:
const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
const i = buttons.indexOf(this);
$(infos[i]).addClass('active-info');
});
This does not rely on IDs at all - feel free to completely remove those from your HTML to declutter, because they don't serve any purpose now that they aren't being used as selectors.
Live snippet:
const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
const i = buttons.indexOf(this);
$(infos[i]).addClass('active-info');
});
.active-info {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Arch of Triumph</span>
</div>
<div class="landmark-button" id="arch-of-triumph-button">click</div>
</div>
</div>
<div class="landmark-wrapper">
<div class="page-content landmark">
<div class="heading span-after">
<span>Romanian Athenaeum</span>
</div>
<div class="landmark-button" id="romanian-athenaeum-button">click</div>
</div>
</div>
----------------------------------------------------------
<div class="landmarks-info-wrapper">
<div class="landmark-info" id="arch-of-triumph-info">
<div class="info-landmark section">
<span class="landmark-title">Arch of Triumph</span>
<span class="landmark-coord">44°28′1.99″N 26°4′41.06″E</span>
</div>
</div>
<div class="landmark-info" id="romanian-athenaeum-info">
<div class="info-landmark section">
<span class="landmark-title">The Romanian Athenaeum</span>
<span class="landmark-coord">44.4413°N 26.0973°E</span>
</div>
</div>
Older answer, without knowing the HTML: You can extract the ID of the clicked button, slice off the button part of it, and then select it concatenated with -info:
$(".landmark-button").click(function() {
const infoSel = this.id.slice(0, this.id.length - 6) + 'info';
$(infoSel).addClass('active-info');
});
A much more elegant solution would probably be possible given the HTML, though.

How to show divs in order?

I'm creating a website just for myself, and want to make divs with text appear in order (some interval between appearance will be great) after the page will load. I don't need any special animation.
I tried to find something on Stack Overflow or anywhere else, but I couldn't. It should be some kind of "copy" of messenger.
Here is what I got:
<div class="messages-area">
<div class="message bubbledLeft">
<p>Hey!</p>
</div>
<div class="message bubbledLeft last-bubbled-left">
<p>Did you hear about it?</p>
</div>
<div class="message bubbledRight last-bubbled-right">
<p>Huh? About what?</p>
</div>
<div class="message bubbledLeft">
<p>About this new website!</p>
</div>
</div>
https://jsfiddle.net/2p860Lxt

You could first hide them with CSS (for instance with display: none in the .message class), and then use the promise returned by .delay().promise() to show them with delay, and chain those promises with reduce:
$(".message").get().reduce(function (acc, div) {
return acc.then(function () {
return $(div).show().delay(400).promise();
});
}, $.when()); // start with a resolved promise
.message { display: none };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="messages-area">
<div class="message bubbledLeft">
<p>Hey!</p>
</div>
<div class="message bubbledLeft last-bubbled-left">
<p>Did you hear about it?</p>
</div>
<div class="message bubbledRight last-bubbled-right">
<p>Huh? About what?</p>
</div>
<div class="message bubbledLeft">
<p>About this new website!</p>
</div>
</div>

You don't need jQuery for this. Here's how you could do it with plain JavaScript:
HTML:
<div id="message-area"></div>
JavaScript:
function addMessage() {
var container = document.getElementById("message-area");
var messageElem = document.createElement("div");
messageElem.setAttribute("class", "message-area__message");
messageElem.appendChild(document.createTextNode("my message"));
container.appendChild(messageElem);
}
window.addEventListener('load', function() {
console.log('loaded')
for (var i=0; i<5; i++) {
window.setTimeout(addMessage, 500*i);
}
});
This will add 5 message elements into the message area, 500 milliseconds apart.

Delegated event doesn't work for elements after sort

I have this HTML element:
<div class="row preview-pictogram">
<div class="column3 col-xs-3" data-index="3">
<span class="index">Spalte <span>3</span></span>
<span class="dec p-2">-</span>
<span class="width">3</span>
<span class="inc p-2">+</span>
</div>
<div class="column1 col-xs-4" data-index="1">
<span class="index">Spalte <span>1</span></span>
<span class="dec p-2">-</span>
<span class="width">4</span>
<span class="inc p-2">+</span>
</div>
<div class="column4 col-xs-3" data-index="4">
<span class="index">Spalte <span>4</span></span>
<span class="dec p-2">-</span>
<span class="width">3</span>
<span class="inc p-2">+</span>
</div>
<div class="column2 col-xs-3" data-index="2">
<span class="index">Spalte <span>2</span></span>
<span class="dec p-2">-</span>
<span class="width">3</span>
<span class="inc p-2">+</span>
</div>
</div>
The is a (delegated) event that listens on the click event of the .dec and .inc classes:
$(".dec, .inc").on("click", this.overlay, function () {
_this.updateWidth(this);
});
This works fine. But at one point I'm sorting the columns by its class name with this code:
ColumnConfigurator.prototype.sortColumns = function (columns) {
var items = $("div", columns).get();
items.sort(sort_by_class);
$(columns).html(items);
};
var sort_by_class = function(a, b) {
return $(a).attr("class").localeCompare($(b).attr("class"));
};
After that happened that delegated event from above doesn't work anymore. I wonder why that happens. I thought the point of delegated events is that they work also for new elements. this.overlay is an element that contains the HTML above and it doesn't change at all.

.on() should be used on the parent.
In your case if this.overlay is a jQuery element that contains the posted HTML then
this.overlay.on("click", ".dec, .inc", function () {
_this.updateWidth(this);
});

EDIT:
After checking #noriMonsta answer I realized that I wrote a wrong code.
I update my answer but I give him all the credit.
I thought the point of delegated events is that they work also for new elements.
Yes, but you are not delegating the events, but attaching them directly to the target elements.
$("div span").on("click", ".dev, .inc", function () {
_this.updateWidth(this);
});
In the code above you are delegating the event to the div elements. As long as the divs exist all the time, your events will trigger even if you alter their inner HTML.
Cleaner, as noriMonsta wrote:
this.overlay.on("click", ".dec, .inc", function () {
_this.updateWidth(this);
});
Because, as you said, this.overlay is an element whose content doens't change never.
In the following snippet you can check how undelegated (or direct) events stop to work after the DOM manipulation:
$(".dec, .inc").on("click", function() {
$("#results").append("not delegated<br>");
});
$(".column").on("click", ".dec, .inc", function() {
$("#results").append("delegated<br>");
});
$("#alterDOM").on("click", function() {
$(".column").html( $(".column").html() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column">
<span class="dec">dec</span>
<span class="inc">inc</span>
</div>
<div class="column">
<span class="dec">dec</span>
<span class="inc">inc</span>
</div>
</div>
<button id="alterDOM">Alter DOM</button>
<div id="results"></div>

Jquery Dropdown List not sliding up after mouse leave

So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});

You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>

JQuery - Show multiple divs

I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>

You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}