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>

remove homepage content using javascript

I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here

$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();

Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/

Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})

Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle

Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help

You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>

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>

Javascript show/hide: How to set to Show

I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?

Change the display:none to display:block on your elaborate_1 div.

Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.

Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});

Active button being highlighted for website

<!-- start menu area -->
<div id="menu" class="editable">
<div id="button1" class="repeatable">Section 1</div>
<div id="button2" class="repeatable">Section 2</div>
<div id="button3" class="repeatable">Section 3</div>
</div>
<!-- end menu area -->
I don't want to give every single button on each page it's own class. I want to use jQuery, PHP, JavaScript or whatever it takes to get it working without having to go through every single button and give it it's own class.
Also, please note I'm not using navigation bars here, I'm using only divs. Every solution I find uses navigation bars and I can't get them to work when using only divs and hyperlinks.
I want to hightlight the button, or colour it etc.. which matches the current active page.

Try something like this using jQuery:
$(document).ready(function(){
$('#menu div.repeatable a').each(function(){
if(document.URL.indexOf($(this).attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
Add .selected to your CSS and style it as needed.
This will loop through the menu items and compare the url in the href attribute to the current active page url.
You can also use the divs inside #menu :
$(document).ready(function(){
$('#menu div.repeatable').each(function(){
if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){
$(this).addClass('selected');
}
});
});

<div id="menu" class="editable">
<?php
$i = 0;
while($i < 10)
{
echo '<div id="button'.$i.'" class="repeatable">Section '.$i.'</div>';
$i++;
}
?>
</div>
Read up on loops

Use the jQuery selectors and .each function. I have done something similar here jQuery.attr('src') replace not working in FF.
You could use a similar script to search for every , check the href value and if it fits you, do something with the div... Like adding a style attribute inline, like style="color: #FF0000;" to make the text red or whatever you want/need.