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 to be able to click on a TR and edit personalia

I'm studying webdevelopment and I'm doing a single page application right now. We are using JavaScript, and I can`t use jquery, bootstrap, etc. I have googled, seen the videos from the lectures, but I am still blank as a canvas.
The problem is I need to make a contactregistre. You should be able to click on the contacts, a different section of the page should be made active where you will be able to edit the contacts and see where they live. The map is OK, but I don`t know how I can make this happen, I find no examples about this which does not suggest using jquery.
We have guessed something like this, but it is probably wrong:
document.querySelector("tr").addEventListener('click' , e => {
document.querySelector('editContact')
function editContact(contact) {
let editContact = document.querySelector("#searchcontact tr");
editContact.innerHTML = "TR";
let form = document.editContact()
}
})
Thanks so much in advance!

There are numerous ways to do this. This is not a complete solution, but should get you started:
Typically you'd have a text input already in your table <input name="username_1" class="hidden" type="text">, which is hidden, along side the content, like <span id="username_1">MAREN</span>
Then you'd have some CSS to hid things:
.hidden {
display:none;
}
So on the click even you'd add the hidden classname to the SPAN and remove it from the INPUT. This visually swaps the static value for the label.
There's more to it after that, but give it a try.

Auto Swap External CSS Stylesheet with toggle scripting

Hi I am trying to get this script to toggle back to original CSS external stylesheet.
I have the following code that works.
$(document).ready(function() {
$("#css-master2").click(function() {
$("link[title=change]").attr({href : "css/master2.css"});
});
});
Whenever someone clicks on anything with id #css-master2 it changes the external style sheet to master2.css (that part works fine).
What I would like it do is change back to the original master1.css if they click on it again. Something like toggle?
Any help would be greatly appreciated.

Check for the link tag's href, if it equals master2, switch back to master1 like the same way above.
Can't think about why you'd do this, considering the exact thing can be done using css classes instead of two different files.

change display property to visible flicks and disappears again

i have a php page that contains a table which i want to display only after clicking a link.
my problem is as follows:
i have a div that is set to display="none"
<div name="details" style="display:none;">
using a javascript, i change it to inline-table, or just block, doesn't matter for the case.
function showDetails(){
var elems = document.getElementsByName("details");
document.getElementById("dis").innerHTML = elems.length;
for (var i=0; i<elems.length; i++)
elems[i].style.display = "inline-table";
}
when i click the link that triggers this script, the div content is shown for a fraction of a second and disappears again..
here is a video of what it looks like:
http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi
i've checked some 5-6 pages of google links about changing display property, and of course checked stackoverflow, but found no relevant answers...
does anyone have a clue?
thanks in advance!
P.S. here is my full code:
http://codeviewer.org/view/code:299e

Remember that you are clicking an <a> tag, which is usually used for a link and they can send you to another page (that's exactly what's happening). Your href attribute is empty, so it's refreshing the page when you click it.
Try this:
show details
Notice return false;.
This will cancel the default action.

The name property is not supposed to be used like that (actually, it's deprecated and should never be used except for form fields). Change your code to:
<table class="details">
And use this to find them:
var elems = document.getElementByClassName("details");
Also, when setting the display property you should use "none" to hide an element and just an empty string to restore it to the browser default value (which can change from one browser to another):
elem.style.display = ""; // remove "none" value to make it visible.
The getElementByClassName feature doesn't exist in old browsers. A quick google search will find sample code to get it working in all browsers.
Also, #Lian is correct you should be returning false in the onclick.

your code in the link you provided says something different from what you posted here on SO. it says in the other code that you change visibility to visible only. Visibility is LOWER PRIORITY than display. If visibility is visible but display is still none, it means that the thing will still be invisible because display is still on none. You must totally forget about visibility and change ONLY the display none to a display block.

create css class on the fly in codebehind

I have a search page that is used in multiple places with multiple 'themes' throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.
However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:
string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);
In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don't know what it was in the Javascript.
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Alternatively I could create a hidden element, assign it the 'enabled' style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I'm still new to a lot of this, so I'd appreciate any suggestions. Thanks for the input!

So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )
<style>
<!--
.divEnabled {
background-color:<%=theme.searchTextHeaderColor%>;
}
.divDisabled {
background-color:gray; /* or wtv */
}
-->
</style>
You could also put it in an external CSS file, which may be a good idea.
Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )
var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);
This is indeed a mouthfull, so, like #Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.

You can use the jquery .toggleClass method.
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
Here is the link to the api doc.
Jquery API