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.

How do I get an array of divs with a specific class?

So I've been working on this web-project that demands a gallery with a slider underneath it. I've used this JavaScript so far to solve the problem in a forEach(element) function:
var divnumber = Array.from(element.parentNode.children).indexOf(element);
So the pagination changes by the index of the clicked element.
But since I need to make it responsive and the graphic designer demands something different in the mobile view I would need to get the number of the divs by using their class. Basically - the same array but different values.
Is there any way to tweak that line of code a bit to let it get the index of the element by its class instead of their parent? Here's the pen for more: https://codepen.io/ridonibishi/pen/BaNyBva
Thank you in advance!

Try using:
var divnumber = Array.from(document.getElementsByClassName('class')).indexOf(element);
It works as intended.

How to add a link within a .html()

I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});

$('#text').html("<a href='someUrl'>Link</a>");
This should do it.

one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');

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.

Jquery toggle mobile menu (remove href javascript)

I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.

In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/

Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?