Develop Reference

Getting click event from parent container except certain children

Expected behavior: When I click on the .parent class, an item detail modal will be shown but the modal won't be shown if I click on the .dropdown or any of it's option.
<div class="parent click-for-item-detail">
<div class="dropdown">
Options
<ul class="dropdown-menu">
<li>option-1</li>
<li>option-2</li>
</ul>
</div>
<div class="item-image"><img class="click-for-item-detail" src="image.jpg></div>
<div class="info">
Item title
<div class="click-for-item-detail"> item subtitle</div>
</div>
</div>
So far:
$(".click-for-item-detail").on("click",function(e){
// show the modal if the target itself has been clicked
if(e.target === this) {
$('#itemDetailModal').modal('toggle');
}
});
I have added click-for-item-detail class in every element that should trigger the item detail modal. Is there a better way to achieve this?

It is true what Phong is saying and that works. However, imagine now you had many child elements in your parent all matching that selector. With something like below, you would add an event listener to each of those elements.
$(".info, .item-image").on("click", function(){
console.log("Trigger");
});
While with your first approach you were already very close to only have one listener, no matter how many child elements are in the parent.
Consider following example:
<ul class='parent'>
<li>No</li>
<li>Click</li>
<li>Event</li>
</ul>
$(".parent").on("click",function(e) {
if(!e.target.classList.contains('parent')) {
return console.log('no event')
}
console.log('fire event')
});
This is called event delegation, and you pretty much do this already. Here I am checking if the element, I am clicking on, is indeed of class parent, only then I fire my event.
You can of course do all sorts of checks, for example only the <li> elements.
$(".parent").on("click", (e) => e.target.tagName == 'LI' && console.log('fire event'))
Here check out this example https://codepen.io/bluebrown/pen/xxGVgYd?editors=1111
I would recommend doing a web search for event delegation and event bubbling.

You can specify some selectors to be able to trigger.
Read the following post to have a better understanding.
Event listener for multiple elements - jQuery
$(".info, .item-image").on("click", function(){
console.log("Trigger");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent click-for-item-detail">
<div class="dropdown">
Options
<ul class="dropdown-menu">
<li>option-1</li>
<li>option-2</li>
</ul>
</div>
<div class="item-image"><img class="click-for-item-detail" src="image.jpg"></div>
<div class="info">
Item title
<div class="click-for-item-detail"> item subtitle</div>
</div>
</div>

You can use :not() selector to filter out the element you do not to be clicked:
$('.parent > :not(.dropdown)').click(function(e){
alert('modal');
//show modal
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="dropdown">
Options
<ul class="dropdown-menu">
<li>option-1</li>
<li>option-2</li>
</ul>
</div>
<div class="item-image"><img src="image.jpg"></div>
<div class="info">
Item title
<div> item subtitle</div>
</div>
</div>

How to toggle class between two element using jquery?

I have accordian lists with one list open always. How can I toggle the active class when the button is clicked?
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button>Toggle the content </button>

Use .toggleClass("active") of jquery and check the below snippet.
$(document).ready(function(){
$("#toggel_class").on('click',function(){
$("ul li").toggleClass("active");
});
});
.active { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button id="toggel_class">Toggle the content </button>

$("button").on("click", function() {
$("li").toggleClass("active");
});
This toggles the class when the button is clicked: https://jsfiddle.net/mqhyLohe/

Try looking at JavaScript classList.toggle() (not compatible with IE9 and lower). Otherwise take a look at jQuery UI (if jQuery is the path you want to wander).

Check if it works
$(".accordion li").click(function(){
$("li").removeClass('active');
$(this).addClass('active');
});

you have to give your list an id
$("#item1").click(function(){
$(".active").removeClass("active");
$(this).addClass("active")
});

I too had faced the same problem. Solved it using icons. Please refer the answer here
This is what I had used before:
if($(this).text() == "-")
{
$(this).text("+");
}
else {
$('#accordion .opener').text("+");
$(this).text("-");
}
});

How to hide a menu when an item is clicked or hide the menu when someone clicks away

So i want to hide my bootstrap menu on the event when an item is clicked. This is my menu code
<div class="container visible-xs" id="top">
<div class="header-bottom navbar-fixed-top">
<div class="top-nav">
<span class="menu"><img src="images/pic copy.png" alt="toggle"> BESSIT4REAL</span>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</ul>
</div>
<div class="social-icons">
<ul class="social">
<li><a href="#" ><i> </i> </a></li>
<li></i></li>
<li></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<br class="visible-xs">
</div>
and this is my javascript code
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".ul").hide();
});
});
$('')
});
</script>
Basically i need to hide the entire "<ul>" element when the <li> item is clicked,
Currently when someone click on home or about, the menu stays on the screen and does not disappear.

Use the following Jquery Code:
<script>
$(".top-nav li").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$(this).hide();
});
});
</script>

you have an error.. your ul has an ID not a class, so you should us '#' in your jquery.
And to hide your ul you can use either hide() or fadeOut(0)..
$("#ul li a").click(function() {
$("#ul").fadeOut(0);
});
or
$("#ul li a").click(function() {
$(this).fadeOut(0);
});

$(".ul").hide();
references all elements with a class of "ul" You probably want (in your code example) the id referece
$("#ul").hide();
Or if you want all the <ul> elements then give them both the same class (like "hideableUL") then you could go like:
$(".hideableUL").hide();

I did this and it helped.
$("span.menu").click(function(){
$(".top-nav #ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".top-nav #ul").hide();
});
});
$('')
});

Trigger event with same ID elements

I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks

As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo

you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});

jQuery accordion

Our html:
<ul class="accordion">
<li>
<h2 class="a-head">head 1</h2>
<div class="a-body">body 1</div>
</li>
<li>
<h2 class="a-head">head 2</h2>
<div class="a-body">body 2</div>
</li>
<li>
<h2 class="a-head">head 3</h2>
<div class="a-body">body 3</div>
</li>
</ul>
JS:
$(".accordion .a-head").click(function()
{
$(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
$(this).siblings().css({backgroundColor:"#fff"});
});
This accordion begins to work If I remove <li></li>. How do I make it work with current code?
Actually problem is in .siblings().
Thanks.

I can offer you this:
jQuery:
$('li h2.a-head').click(
function(){
$(this).closest('ul').find('div.a-body').slideUp(400);
$(this).closest('li').find('div.a-body').slideToggle(400);
});
css:
li div.a-body {
display: none;
}
JS Fiddle demo.

Is it what you want? : http://jsfiddle.net/v2Z5L/1/
It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.