Develop Reference

jQuery click link when another is clicked

I have an element like this
I want mylink2 to also be clicked whenever somebody clicks on mylink
To start I am trying to get the parent container on click like this
$("#mylink").click(function(){
parentcontainer = this.closest('.myelement');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
But now I am stuck trying to click mylink2 am I on the right track?

You can use closest to get the parent and then find second element and trigger click command but since you have ids maybe you can use them for selecting elements. Keep in mind that id's must be unique.
$("#mylink").click(function() {
const parent = $(this).closest('.myelement');
parent.find('#mylink2').trigger('click')
});
$("#mylink2").on('click', function() {
console.log('click link 2')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>

you can trigger the jQuery first click to trigger the second one this way:
$("#mylink").click(function(){
$("#mylink2").click();
});
taking in cosider that #mylink2 has some kind of a click handler function

If your links have ids the easiest way would be to use these ids:
$('#mylink').on('click', function(event) {
console.log('my link click');
$('#mylink2').click();
});
$('#mylink2').on('click', function(event) {
console.log('my link2 click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>

Try this:
$('#mylink, #mylink2').on('click', function(event){
console.log($("#mylink1").text());
console.log($("#mylink2").text());
});

It should be straightforward since you are using unique IDs for the two elements.
Triggering the second elements click event in the first elements handler.
$("#mylink").on("click", function(){
$("#mylink2").trigger("click");
});`

Jquery - toggling a nest div on click that's hidden by default

I have a link that when clicked, will reveal a div below it. The div is hidden by default.
Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.
The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.
Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.
How can I get around this? Here is my code -
$('.outer-toggler').click(function() {
$(this).parent().find('.outer-data').toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).parent().find('.inner-data').toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements

Use $(this).next().toggle(); as the toggle target is the next sibling
$('.outer-toggler').click(function() {
$(this).next().toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).next().toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>

buttons to activate buttons that toggle from one div to another

Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!

Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.

You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>

I want a certain div show up/be selected when all other divs aren't showing/selected - jQuery

I want to know how I can show a certain div, when all other divs aren't showing anymore. I've tried toggle, but that create a mess. I've used Hide, but after it is hidden it don't show anymore. I recommend you to watch my fiddle then you'll know what I mean.
HTML:
<div id="clicks">
<a class="click" id="showInfo" data-target=".1"><button>1</button></a>
<a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
<a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
<div class="1" style="display: none;">
1
</div>
<div class="2" style="display: none;">
2
</div>
<div class="3" style="display: none;">
3
</div>
<div id="text">
"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"
</div>
JavaScript:
$(document).ready(function () {
var $targets = $('.target');
$('#clicks .click').click(function () {
var $target = $($(this).data('target')).toggle();
$targets.not($target).hide()
});
});
http://jsfiddle.net/73z48jr2/1/

$('#clicks .click').click(function () {
$('div.target' + $(this).data('target')).toggle();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
});
jsFiddle example

You can use a simple condition :
$('#text').toggle(!$targets.is(':visible'));
http://jsfiddle.net/73z48jr2/2/

How to make jQuery slidetoggle effect for multiple div on same page?

it works fine for one div
(function($) {
$(document).ready(function(){
$('#div1').hide();
$('a.plus').click(function(){
$('#div1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
How to make this slide toogle effect for multiple div on same page? I have multiple divs with different id to hide like #div1, #div2, div#3.
edit:
This is situation in html
<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>

(function($) {
$(document).ready(function(){
$('#div1, #div2, #div3').hide();
$('a.plus').click(function(){
$(this).next().slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);

Presuming your HTML is something like this:
<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>
Then having a function like this will work for as many a.plus / div pairs you have:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
$(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
If your a.mores are, for whatever reason, nowhere near the divs themselves, you will have to set an attribute on the a.more to link it to a div, eg. (HTML)
<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>
... some more HTML
<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>
and Javascript:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
var id = 'div' + $(this).attr('data-article');
$('div#' + id).slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);

Give your divs the same class (like 'div_to_toggle') and then instead of $('#div1'), $('#div2'), ... you can use one selector: $('.div_to_toggle') that will select them all:
$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();