Vanbecelaere: this might.

 
Ushijima: Vanbecelaere: $’project-info’.each . var projInfo = $’project-info’; makes no sense

Vorwald: Why are you grabbing all elements over and over again in a loop?

Lover: Your binding multiple event handlers to each element

Feltenberger: Cork: As you probably can see, I’m kinda new to all this. How should I write it and why does the .closest not work?

Kraushaar: Ok, give me a min to try to clean this up

Pickles: Cork: Thank you so much, try to comment out if it’s not much to ask so I can understand the code a bit more

Foxworthy: Short for clean-up: $.Cork;

Carathers: Vanbecelaere: faClose is that meant to close all project-info or just the on related to the article you clicked it on?

Chham: Cork: faClose is the little “x”, it should just close the “dialog”

Hodek: And what is the dialog?

Yerty: Cork: var projInfo = $’.project-info’;

Ellenbogen: You didn’t include the css so i only have the elements to go on

Spatafore: Cork: Oh, sorry – do you want me to include the CSS?

Skrip: Cork: Did I miss something, my internet is not working out with me right now

Grosjean: Cork: Alright, thank you again

Callicott: Vanbecelaere: something like this https://jsfiddle.net/q02heje0/1/

Counihan: Vanbecelaere: stopPropagation is something you should avoid like the plague

Saracino: Cause it makes a statement that you almost never can make

Sweetwood: Cork: Alright, thank you so much – could you possibly comment out a bit? Also, what does this anonymous? function do? function {.

Heth: Vanbecelaere: it is a scope

Greder: It is just so the var open = false becomes private to the functions in there

Hamar: As oposite to a globally accessible variable

Destine: Line 3-5 is most likely something you don’t need

Streets: But you didn’t include what hid the project-info element

Grosskopf: Vanbecelaere: if you have questions about what the rest of the code does, just ask

Guillet: Cork: Big thanks, much appreciated! All through I do not understand the code to the fully, but if you’ve some time over you can comment it all out, if it’s not much to ask

Tanguay: It is quite simple instead of binding event handlers on each elements, and killing the bubbling of those events

Laiche: I bind one delegated event handler on do***ent and check for events from .fa-expand line 13-16

Hogsett: This is for handling the showing of the dialog

Shack: The setTimeout last in that handler is to not close the dialog directly as you open it cause the top handler would fire directly

Citizen: The do***ent wide handle line 6-13 starts by checking if any dialog is opened

Aye: Or if the event bubbles from inside the .project-info

Finan: If it comes from inside the project-info, but not from .fa-times

Dormer: Exist early from the handler

Stodghill: Else fade out all dialogs

Kindler: Cork: So basically what !open means is “if it’s open then do this”?

Derubeis: If it is’t open exist early

Chadbourne: Then the or case is for clicks inside the dialog

Zettlemoyer: Cork: What does the return; on line 10 do?

Jeleniewski: If no dialog is open, or the click came from inside project-info and not inside fa-times. Exit early

Tofflemire: You could invert the if case and put all the code inside it, but i prefer to not nest the code deep if i don’t have to

Rosekrans: Cork: Hmm. I’m not really following here – what does “exit early” mean? Alright, I understand – it’s important to keep it compact and simple, right?

Verela: Vanbecelaere: it means don’t run the code after the if case if the if case is true

Moul: Vanbecelaere: this might help function { return; console.log”this code won’t ever run”; };