Develop Reference

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');
});
});

jQuery on click trouble

I am having trouble with my jQuery on click function. I can't figure out what I'm doing wrong since it isn't even registering the click in the console (I have set breakpoints and it refuses to visit my on click). I am using jQuery in other areas of my code, so I think I have linked it correctly, and I have checked the target several times to make sure that it is a class and I'm using the correct syntax, but I must have missed something. I feel like I have just been looking at it too long. Any help would be appreciated.
HTML:
<h3 class="collapseButton leftH3" data-toggle="collapse" data-target=".collapse_me">
Returns information about the current User
<span class="pull-right" id="arrow_me">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</span>
</h3>
JS:
function changeArrows() {
$('.collapseButton').on("click", function() {
$(this).next('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
}
changeArrows();

You have to use children not next
function changeArrows() {
$('.collapseButton').on("click", function() {
$(this).children('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
}

The on click is triggert but your selecotor is not correct.
$(this).children('.pull-right').html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
works fine for me (changed next for children)

Have you tried
$(document).ready(function(){
changeArrows();
});

Okay, rewrote it to do what you want it to do. Note that instead of next() (which gets the following sibling element with the given selector), you want children() (which gets the child elements of $(this)).
$(this) ends up resolving to be the h3 element in almost every case.
$(document).ready(function() {
$('.collapseButton').on('click', function(event) {
$(this).children('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
});

Try putting the body of your function in $(document).ready( ... ). I don't think your event handler is available after this function is run. The .next() will also find the next sibling, but the element you're wanting to change is a child.
$(document).ready(function() {
$('.collapseButton').on("click", function() {
$(this).children('.fa.fa-arrow-up')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
})

You can also just toggle the class for the i element without changing html:
$(".collapseButton").click(function(e) {
$(this).children('.pull-right').children('.fa-arrow-down').toggleClass('fa-arrow-up');
});

function setVisibility(id1,id2,id3) {
if(document.getElementById('bt1').value=='Show Box 3'){
document.getElementById('bt1').value = 'Show Box 4';
document.getElementById('bt1').value = 'Show Box 5';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Show Box 3';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'inline';
document.getElementById(id3).style.display = 'inline';
}
}
<h4 class="pro_detail_title_name_new" >Product Description
<button type=button name=type id='bt1' onclick="setVisibility('sub3','sub4','sub5');";><span id="sub3" class="mobile-plus1"style="display:inline;" >+ </span><span id="sub5" class="fbutton"style="display:none;">-</span> </button></h4>
<div id="sub4"style="display:none;">-- inside --</div>

Toggle all except one and then toggle the excepted one?

I have this Q&A section.
What I want to do is show the clicked one and hide the all others. After that if I click again on the clicked one it will hide like others.
I have done the hide all parts except the 2nd click part.
MARKUP
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>
JQUERY
$(document).ready(function() {
$(".question").click(function() {
$('.answer').not(this).hide();
$(this).next(".answer").toggle();
});
});
Now I need to hide the THIS on 2nd click. How to do that?

Check it
$(".question").click(function() {
$('.answer').hide();
if(!$(this).next(".answer").is(':visible')) {
$(this).next(".answer").show();
}
});

You need to pass the current answer element to not().
this in the click handler is the question element so $('.answer').not(this).hide(); will hide all the answer elements, then calling toggle for the current answer element will always display it instead of toggling it
$(document).ready(function() {
$(".question").click(function() {
var $ans = $(this).next(".answer").toggle();
$('.answer').not($ans).hide();
});
});
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>

try this:
$(".question").click(function() {
if( $(this).is(':visible') ){
$('.answer').not(this).hide();
}else {
$('.answer').hide();
}
$(this).next(".answer").toggle();
});

Javascript if/else not working as expected

I am trying to toggle a hidden menu with a link. But when i click on the link, it reopens the hidden menu instead of closing it.
Here is how i expect it to run:
When i click labelLink
if hiddenBox 's display = 'none', then change it to display = 'block'
if hiddenBox 's display = 'block', then delete its focus by blur() and set it display='none'
When i click outside of the hiddenBox when it has the focus, set hiddenBox 's display='none'
(This part is working well.)
JsFiddle
<ul>
<li>
<a id="labelLink" href="#"
onclick="
if(document.getElementById('hiddenBox').style.display === 'block'){
document.getElementById('labelLink').focus();
document.getElementById('hiddenBox').style.display ='none';
}
else{
document.getElementById('hiddenBox').style.display = 'block';
document.getElementById('hiddenBox').focus();
}
return false;"
>
Click Me
</a>
<div id="hiddenBox" tabindex="-1"
onblur="document.getElementById('hiddenBox').style.display ='none';"
>
I was hidden
</div>
</li>
</ul>

Do it this way instead.
var labelLink = document.getElementById('labelLink');
var hiddenBox = document.getElementById('hiddenBox');
labelLink.addEventListener('click', function() {
hiddenBox.style.display = hiddenBox.style.display == 'block' ? 'none': 'block';
});
labelLink.addEventListener('blur', function() {
hiddenBox.style.display = 'none';
})
#hiddenBox {
display: none
}
<ul>
<li><a id="labelLink" href="#">Click Me</a>
<div id="hiddenBox" tabindex="-1">I was hidden</div>
</li>
</ul>

As already pointed out, the two event listeners are interfering with each other. One way of fixing this is to remove the listener on labelLink when the hidden box is shown, and restore the listener with a slight pause after the hidden box is hidden again. JSFiddle
var labelLink = document.getElementById('labelLink'),
hiddenBox = document.getElementById('hiddenBox');
labelLink.addEventListener('click', showBox);
hiddenBox.addEventListener('blur', hideBox);
function showBox(){
hiddenBox.style.display = 'block';
hiddenBox.focus();
labelLink.removeEventListener('click', showBox);
}
function hideBox() {
hiddenBox.style.display = 'none';
labelLink.focus();
window.setTimeout(function() {
labelLink.addEventListener('click', showBox);
}, 500);
}
<a id="labelLink" href="#" >Click Me</a>
<div id="hiddenBox" tabindex="-1" style="display:none" >I was hidden</div>

Changing text when unrelated divs are empty

I have the div event_wrapper that can be dynamically added on a page by clicking the link in add-event. The user can delete/add these divs as many times as they want. If the user chooses to delete all of these event_wrapper divs, I want to change the text inside add-event. Here is the HTML:
<div class="event_wrapper">
<div class="event">
<div class="well darkblue-background pull-left">
<a class="close tooltip" data-tooltip="Delete this event"><i class="icon-remove"></i></a>
</div>
</div>
</div>
<div class="add-event pull-left">
And Then...
</div>
(I am using jQuery) I tried using :empty selector, but it does not seem to be working. Any suggestions? Thanks!

Have a look at - https://stackoverflow.com/a/3234646/295852
And then use contentChange() like:
$('.event-wrapper').contentChange(function(){
if($(this).children().length > 0){
// events exist
$(".add-event pull-left").children('a').html('And Then...');
} else {
// no events
$(".add-event pull-left").children('a').html('your text');
}
});

if($(".event-wrapper").html() == null) {//looking inside event-wrapper; if it contains any thing
$(".add-event a").html("whatever");
}

if(!$(".event_wrapper")){
$(".add-event pull-left").html("Whatever text you want here"); //changes the text of the div
//or
$(".add-event pull-left").children('a').html("whatever text you want here"); //changes the text of the anchor child
}