We Keep Coding

toggle divs so only one is open at a time, but be able to close them all as well javascript

I have these divs that I can toggle onclick to scale larger one at a time. It works perfectly except that once one is enlarged, one is always enlarged. I am using toggleOpen for this. I am looking to be able to make it so that it can do what it already does, but then onclick of the enlarged div have it go back to its original size without having to toggle with another div. In other words, I need a way to make the page go back to a state where all the divs are in original size. I have tried else statements to no avail as well as adding another function to remove class. I only want a js solution - no jquery or anything else please. Here is the JS portion of it.
const event = document.querySelectorAll('.eventsBorder')
function toggleOpen() {
let opened = document.getElementsByClassName('large')[0];
if(opened!=undefined)
opened.classList.toggle('large');
this.classList.toggle('large');
}
event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));
Here is my codepen
Thanks in advance for any help!

The opened variable gives you back a list of all the HTML elements which have the large class, and when you click again on an already enlarged div that automatically satisfied this criteria. So, what happens is that if you click on the same item twice, your toggleOpen function first removes the large class from that item and then adds it again because of the following line in your code-
this.classList.toggle('large');
The best way to achieve what you want would be to make sure that in addition to opened not being undefined, you should also make sure opened is not the same item as the one you clicked on. You can accomplish that using-
if(opened != undefined && opened != this)
Here is a link to the updated codepen to see it in action.

So it looks like you are using querySelectorAll to select all elements with the class "large", then you're toggling the class. If you toggle the class, it will no longer be a part of that query selection, as it no longer has that class applied, so it will not be able to remove it.
const event = document.querySelectorAll('.eventsBorder')
event.forEach(eventsBorder =>
eventsBorder.onclick = () =>
eventsBorder.classList.toggle('large'));
This seems to accomplish what you'd like.

Create new DOM element if a specific height was reached with part of the old content from DOM element before

Update: 27th December 2016
I did change the heading, since every DOM element could be the target (it actually doesn't matter if it is a <p> element or not).
I've provided some more informations about what I'm using and what I'm trying to achieve. Maybe there are native electron ways to achieve this? Or libs which could help me too?
Product: I'm going to extract tgz files with XMLs in it. Those XMLs will be used to automatically fill tables in the finished product. After that the tables and paragraphs will be editable where users can add new rows to the tables and also add new paragraphs to the page.
Framework: I'm using electron to fire the whole thing up.
Backend: NodeJS 7.x.x to make use of ES6 features
Libraries: jQuery, Bootstrap, Angular, Materialize, lodash, async, moment
Please keep in mind that I already did achieve all of my product needs. My original question was and still is if there is a more performant way of doing this:
I have a html page which can have 'n' containers called pages. A page can hold multiple <p> elements. This <p> elements are set to contenteditable="true".
Now I'm trying to create a javascript function which is checking the single page height with something like this:
// Set max container height to 10cm.
let containerMaxHeight = 377.95276 // 1 cm = 37.795276px;
if(containerElement.clientHeight > containerMaxHeight){
/**
* do desired stuff.
*/
}
everything easy so far. The function is getting the innerHTML of the <p> element which is currently beeing edited and "break the site" into a new site if the page height is above the limit. I have thought out a recursion wich is removing words (most of the time 1-3) of the old <p> element and inserting them to a newly created page with a <p> element until the maximum height of the old page is set to its maximum value.
Here is an example of my recursion (simplified) which is removing words from the end of innerHTML like this:
let lastWordToBeRemoved = oldParagraphElement.split("\\s+").pop();
// append old value to new <p>
newParagraphElement.innerHTML += lastWordToBeRemoved;
// remove last Word from old <p>
oldParagraphElement.innerHTML.slice(0, -lastWordToBeRemoved.length);
/**
* Recheck height of old page container if it is above the
* maximum redo above code
*/
I've startet out with this example:
https://delight-im.github.io/HTML-Sheets-of-Paper/
as you can see the pages are getting bigger and bigger if you edit them. I've already prevented that with my JS function.
Now that you have an idea of what I'm doing: Is there a more performant and or elegant way of doing this? I'm highly interested to hear how you would solve this problem.
If there is anything still unclear let me know, I will update my answer.
Thank you in advance!
Regards,
Megajin

Instead of splitting words, I think you should insert another p element into the expected position instead. Then you can easily move the exceeding paragraph into the new page. For example
paragraphElement.innerHTML = paragraphElement.innerHTML.replace(lastWordToBeRemoved, '</p><p class="exceeding-paragraph">' + lastWordToBeRemoved);
newPage.insertBefore(oldPage.querySelector('.exceeding-paragraph'), newPage.firstElementChild);

carousel javascript several times

I wanna use this carousel :
[http://codepen.io/ScottMarshall/pen/FwxpH][1] on a forum, but when I repeat the code, it doesn't work well.
Can you help me ?
here, it's working, but the second container doesn't want and I don't want to change anything in the HTML...
JSFiddle

Here is working fiddle: http://jsfiddle.net/1x6251wc/2/
This is the key change to get the context "Front" instead of all of them:
var $front = $this.parent().find(".Front");
It's a poorly written plugin, but this change should get it to work across multiple instances.

jquery multiple slideshow on the same page

I'm using a jquery code to display an image slideshow on my website, with a counter.
When clicking on the image, img swicth between show and hide.
here is the jquery code i'm using :
$(document).ready(function () {
var count = $('.image_news').length;
$("#total").text(count);
// set display:none for all members of ".pic" class except the first
$('.image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides = $('.image_news');
$slides.click(function () {
// stores the currently-visible slide
var $current = $(this);
if ($current.is($slides.last())) {
$("#current").text("1");
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$("#current").text($current.next().index()+1);
$current.hide().next().show();
}
});
});
it works fine with one slideshow, but I would like to have several sildeshow on the same page, and I don't know how many so I can't add a unique ID to my images ('.image_news')...
is there a way of doing it using $this ? I need also to have unique counter for each slideshow, and the slideshow to be fully independant... when clicking on first slideshow to navigate, only the first slideshow should slide.
hope someone can help me with this, or maybe there's another way of doing it...
here is a jsfiddle to see it in action :
http://jsfiddle.net/XRpeA/19/
thanks for your help

I can't write the codes exactly but I can give ideas to design it. I think you should think object oriented way. Because you want to use more than one instance of sliders. If I were you, I'd do these to get the results you want.
Make a slider class whose constructor takes 'class name' as a parameter. For example in your situation, you have used "image_news" for class name. For each of sliders, use different class names. With using this, there will be no longer problem for separation between different sliders in the page.
Define the click method exactly as above.
I may have forgotten sth but with these design there is no more problem for multiple slider in one page.

Get dynamic text from selected object - (by ID and "active" class) - jQuery

My main mission: Is to get the text of the next and the previous objects to the chosen object - To display the image (and its titles) Previous & Next.
Before that I have a problem: to get text of a selected object, from an index to a variable.
The problem: Every time I pick a random object, the variable does not change but the text is added to the existing text in the index.
I made a DEMO, would appreciate your help.
$(document).ready(function hintProject(){
$('#nextProject, #prevProject').click(function(){
subtitle = null;
subtitle = $('#client-sub.active').justtext();
$('#next_target_title').text(subtitle);
alert (' text::: ' + subtitle );
});
});

It looks like jQuery simply can't find the objects you're specifying. I don't think the problem is with the snippet in the question. I think the problem is with your document ready function.
To debug, try simplifying your problem by cutting out all of the additional complexity of the setup script and just set up an HTML page that is in the state you want. It's much easier to understand 1 problem than 2 or more.
Also, try simplifying how you're specifying an active item: a single class on the portfolio item would make your life easier. Then you can specify css and such based on the parent instead of adding multiple classes to multiple things inside the each portfolio item.