Develop Reference

click a div and get the id of another div

I want to click on a element and get the id from another div which is not related to it.
I tried this:
$(".map_flag").on("click",function(){
var objective = ($(this).attr("data_modal"));
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="map_flag" data_modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>

First of all, custom attributes need to start off with data- not with data_ (note the dash/underscore).
Then
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
first fades in $('#map_1') and then, after that's been done, fades in $('#map_1 .modal'). Not sure if that's intended, but if the #map_1 elements has no further children, you might want to fade in only once.
For the rest, your code should work fine.

I think what you need would be something like this:
<button class="map_flag" data-modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>
And then in JavaScript
$(".map_flag").on("click",function(){
// You should use data-* attributs as jQuery has a special function
// .data("name") that obtains the value of property data-name for example
var objective = $(this).data("modal");
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});

I am not very confident about my jquery skills, but dont you need to "fade out" before fade In ?
[https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]

trigger method not working in jQuery

I have a page which has about 100 divs like this.
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
The IDs have different number. And I am trying to click on this div/or the spam via jQuery one by one. So, I made a loop like this..
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
get_div = jQuery("#" + div).trigger('click');
}
}
});
The above code should work, but for some reason it doesn't. It works with styling and all other DOM manipulations like changing color of the text via
jQuery("#" + div).css({'color': 'red'}) so the loop is ok, I also tried to target the span using jQuery("#" + div).find('span').trigger('click') but nothing happens.
btw: on the website, if you click any of the divs, the instantly show you more information, but with the this nothing changes, I am not sure if the trigger click is even working

Here is the updated version of your code. Instead of jQuery("#" + div).trigger('click'), you can use $(this).trigger('click') and separately, define what should happen on the click event.
$(document).ready(function() {
$('div').each(function() {
div = $(this).attr('id');
if (div && div.includes('ListItem_JBEEB')) {
$(this).trigger('click');
}
});
});
$('div').on('click', function() {
console.log($(this).attr('id') + ' got clicked..');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
<div id="ListItem_JBEEB_848">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-1</span>
</span>
</div>
<div id="ListItem_JBEEB_849">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-2</span>
</span>
</div>

You have to initialize the click event before calling it, You have to check that the particular click event is already initialized before calling it not not else it won't perform the click event.
For Example
// THIS WILL WORK
$(document).ready(function() {
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
});
// THIS WILL NOT WORK
$(document).ready(function() {
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
});

Creating spans that hide when another object is clicked

Here is my html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
<a rel="img1">Link1</a>
</td>
<td>
<a rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="cant-believe-it-icon.png" id="img1"/>
<img src="too-much-icon.png" id="img2"/>
</div>
<span>Text with fist image</span>
<span>Text with second image</span>
And my jQuery:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
When the first td is clicked, the first image is visible. When the second td is clicked, the first image is hidden, and the second image is visible. How do I apply this to the spans as well?
Update: I set for all images and spans a class="groups". Then I paired the first image with the first span etc. using id="group1", "group2" and so on. Then I set the rel's of the td's to "group1", "group2" etc. The javascript now reads:
$( window ).load(function() {
$(".groups").hide()
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$(".groups").hide()
$('#'+rel).fadeIn('slow');
});
Everything hides when opened, but when the td's are clicked nothing happens?

Solution
HTML
<div id="box">
<img src="http://placehold.it/350x250/&text=img1" class="img1"/>
<img src="http://placehold.it/350x250/&text=img2" class="img2"/>
</div>
<span class="img1">Text with fist image</span>
<span class="img2">Text with second image</span>
CSS
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
$('.'+rel).fadeIn('slow');
});

It works as the same..
Look jsfiddle: http://jsfiddle.net/kychan/j8vqX/
$('a.show').click(function()
{
$('.hideSpan').fadeIn();
});
$('a.hide').click(function()
{
$('.hideSpan').fadeOut();
});

Use your rel attribute on the spans:
<span rel="img1">Text with fist image</span>
<spa rel="img2">Text with second image</span>
JavaScript:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a, span').removeClass('active');
$(this).addClass('active');
$('img, span').hide();
$('#'+imgid + ', span[rel="' + imgid + '"]').fadeIn('slow');
});
Sidenote: it would be better to use a data-rel attribute, as that's what the data-* attributes are for.

$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
spanid = imgid.substr(4) - 1*1;
$('#'+imgid).fadeIn('slow');
$('span:eq('+spanid+')').fadeIn('slow');
});

Instead of using ID in the image, use a particular class and add the same class to the spans also. So when alongwith the image with that class, spans will also be shown/hidden. Modified Code:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img,span').hide();
$('.'+imgid).fadeIn('slow');
});
Here is the link for jsfiddle :http://jsfiddle.net/EuGr3/

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/

I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});

You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

Animating a show/hide script

I am trying to add an animation/fade to a show/hide script.
When the user clicks the ".show" anchor, I would like to slide down the ".buttons" div by the height of the ".targetDiv" div, after-which I would like the ".targetDiv" div to fade in.
Then (if possible), I would like the reverse action to occur when the ".hide" anchor is clicked - causing the ".targetDiv" to fade out, and the ".buttons" div to slide upwards (back to its original position).
Thank you for your help!
jsFiddle:
http://jsfiddle.net/XwN2L/1296/
HTML:
<div id="content" class="targetDiv">Content</div>
<div class="buttons">
<a class="show" target="content">Show</a>
<a class="hide" target="content" style="float: right;">Hide</a>
</div>
JavaScript:
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).hide();
});

I would simply use the slideUp/slideDown methods of jquery.
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).slideDown('slow');
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).slideUp('slow');
});
If you are desperate to slide and fade, checkout the following:
fadeOut() and slideUp() at the same time?

It's easier to accomplish when the target element is nested inside another element. This way you can separately apply the slide animations to the containing parent element and the fade animations to the target child element.
For example:
HTML
<div id="content_container">
<div id="content" class="targetDiv">Content</div>
</div>
<div class="buttons">
<a class="show" target="content">Show</a>
<a class="hide" target="content" style="float: right;">Hide</a>
</div>
Javascript
$('.show').click(function () {
var target = $('#' + $(this).attr('target'));
var target_parent = target.parent().height(target.outerHeight());
target_parent.slideDown(250, function() { target.fadeIn(500); });
});
$('.hide').click(function () {
var target = $('#' + $(this).attr('target'));
var target_parent = target.parent();
target.fadeOut(500, function() {target_parent.slideUp(500);} );
});
Note how in the "show" handler, the parent element inherits its height from the currently hidden child element.
See possible jsFiddle demo

one option:
give your elements absolute positioning:
position: absolute;
top:0px;
then animate it like so:
$('.show').click(function () {
$('.targetDiv').hide();
$('.buttons').animate({
top : '80px' // the height of your content + the padding + the margins
},'slow',function(){
$('#content').fadeIn('slow');
});
});
$('.hide').click(function () {
$('#content').fadeOut('slow',function(){
$('.buttons').animate({
top : '0px' // the height of your content + the padding + the margins
});
});
});
working example: http://jsfiddle.net/XwN2L/1298/