Develop Reference

Click event for multiple dynamically generated elements with the same class name to hide and unhide other elements

I am trying to write a JavaScript or jquery function that binds a click event to dynamically or server generated element with the class name (manage-inventory). The function should perform the following :
When clicked, it should toggle a bootstrap class (d-none) on its next sibling element(manage-inventory-card). The key is here is to remove the default "d-none" class in order to make the "manage-inventory-card" element show
When the element with the class name (manage-inventory) is clicked again, it should add the class "d-none" back to the "manage-inventory-card" element in order to hide it.
If any part of the page except the "manage-inventory-card" is clicked, the "manage-inventory-card", the class name "d-none" should be added back to it.
Clicking another dynamically generated element with the same class (manage-inventory) should close the previous "manage-inventory-card" if still open by closing it with the addition of class "d-none".
The event should work on only one instance of "manage-inventory" and "manage-inventory-card" at a time. Clicking one should not make it work on all others at the same time. There can only be a running instance
Below is the HTML code when it is dynamically generated by the server
The code only works for toggling of the "d-none" class when it is clicked. I don't know how to write the one that hides it back by adding "d-none" to the currently opened "manage-investment-card" when another element "manage-inventory" element is clicked and also write the code that closes it when any part of the page is clicked. Thank you
$(document)
.find(".manage-inventory")
.each(function(index) {
$(this).on("click", function() {
$(this)
.next()
.toggleClass("d-none");
});
});
.d-none {display: none !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>

So you need to delegate.
I am delegating from document because you want to check all clicks on document
$(document).on("click", function(e) {
var $tgt = $(e.target);
if ($tgt.is(".manage-inventory")) {
var $thisChild = $tgt.next();
$(".manage-inventory-card").not($thisChild).addClass("d-none");
$thisChild.toggleClass("d-none");
} else {
$(".manage-inventory-card").addClass("d-none");
}
});
.d-none {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">1
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">2
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>

Link on Link - How to activate JS code without parent link activation?

Here is a case:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="#5" />
</div>
</a>
By default, if I click on #2,#3,#4,#5 I will be redirected to #1.
So how I have to fix CSS if I want to click on the input without #1 activation?
Thanks in advance!

Just put a
return(false);
at the end of the JavaScript that is executed when clicking the input.

Yep, you can do it like this:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="doSomething(); return false;" />
</div>
</a>

Assuming your tag is written correctly, use z-index:
<input type="button" style="z-index:99" onclick="foo()" />
Though I wonder if you should rethink your page layout and avoid such a large link tag...

This is an interesting problem that I faced several times.
You basically need to listen for the click event on the parent element, then check if it's an anchor or other element and then act upon it.
$('YOUR ELEMENT').click(function (e) {
var target = $( e.target );
if ( target.is( "a" ) ) {
Do something
}
else if (target.is( "input" ))
{
Do something else
}
});
Although I wouldn't recommend having an anchor as a wrapper to div as it breaks in some cases, with this approach you can easily use a wrapper div with a data-link attribute and navigate to this link programmatically through JavaScript

Hiding other ids when read more of a particular id is clicked

I have various read more buttons under each staff details in my about.html which will direct to their particular sections in another page. i have about.html where i have displayed the staff images, excerpt description and a read more button. Full description of each staff can be red from the bio.html where i have entered the complete description.
When read more button of say id #bio1 is clicked it will be linked to http://www.mysite/bio.html#bio2 . i want all the other ids to be hide in this case(#bio2, #bio2, #bio3 and so on)
HTML CODE
<li>
<div class="item">
<div class="img_block wrapped_img">
<img src="img/pictures/team1.jpg" alt="Tom" />
</div>
<div class="carousel_title">
<h6>Dave</h6>
<div class="op">Chair Person</div>
</div>
<div class="carousel_desc">
<div class="exc">Saul Yarmak has the distinguished honor or repeating his role as Chairman of BXI.</div>
<div class="read_more">
Read More
</div>
</div>
</li>

When you click on #bio1 hide all elements with particular class and show only #bio1:
<span id='bio1' class='a'></span>
...
<span id='bio8798' class='a'></span>
$(document).on('click', '.a', function(){
$('.a').hide();
$(this).show();
})

Add a class to the links and use jquery not() as shown here: jsfiddle
$('.myLink').click( function() {
$('.myLink').not(this).css('visibility','hidden');
});
This will make all elements of class myLink invisible - except the one that has been clicked (this) . If you want to remove from the layout then you would use hide() rather than css('visibility','hidden')

give you bio elements a class name "bio". then do the following to hide them all:
$(".bio").hide();
after that show your selected bio:
$("#bio6").show();
see http://api.jquery.com/hide/ and http://api.jquery.com/show/

If on click of button (#bio1), redirects to another page then I don't think there is a use for hiding other buttons.
Since page is already redirected to another page/section.
Update:
Now you can do this using Attribute Starts With Selector,
var bioVar = $("div[id^='bio']");
bioVar.on("click", function() {
bioVar.not(this).css("display", "none");
});

Making ahref from a div

I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?

The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});

You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.

You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>

you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")

<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.

if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>

Use same div to toggle different parts of the page

Hello I have the following code:
Javascript/jQuery:
$(document).ready(function() {
$(".clickMe").click(function() {
$(".textBox").toggle();
});
});
Html code printed with a for loop:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>
I would like to be able:
When the page loads I want the to be hidden and toggle on click.
Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.
jsFiddle code:
http://jsfiddle.net/A7Sm4/3/
Thanks
Edit 1: Class instead of Id
Edit 2: Fixed jsfiddle link

id are supposed to be unique
you should use class to do this
[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/

Something like this should do the trick:
$(document).ready(function() {
var divs = [];
$(".textBox").each(function(index) {
divs[index] = this;
});
$(".clickMe").each(function(index) {
$(this).click(function() {
$(divs[index]).toggle();
});
});
});

ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
...
Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.
Then you attach click handlers to a.clickMe:
$(function () {
$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it
$(this).nextAll('div.textBox:first').toggle();
});
});
However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).
E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".
In that case (you used your original markup), this code will work:
$(function () {
$('a#clickMe').click(function () {
$(this).nextAll('div#textBox:first').toggle();
});
});
Again, don't do this unless you absolutely need to!

$(document).ready(function() {
$("a").click(function() {
$(this).parent().find("div").toggle();
});
});
Use something similar to this.

Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.