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.

using tooltipster to display tool tips as part of innerHTML for a div

I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:
function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}
Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.
Thank you!

You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.
For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499

How do you reset a button from "clicked" to "unclicked"

I have tried things like the following, but to no avail. (I am a novice programmer, so be nice.)
document.getElementById('Button1').clicked = false;
document.getElementById('Button1').value = false;
document.getElementById('Button1').value = document.getElementById('Button1').defaultValue;

Use CSS to do this, you could use CSS visited property to show if the link is clicked

Normal buttons do not behave this way. Links do, but not buttons. I'm thinking anything that has an ID of 'Button1' in Your page is actually a link Some Text, that has a CSS style (or none at all) making it appear differently once You clicked it at least once, am i right?
If so, You don't need javascript for now. You should create (or edit an existing) CSS sheet, and style your "Button1" in it. How to do it? Read here

need dynamic content on page using javascript

I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!

http://fancybox.net/
lightbox, etc...

The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text

This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.

How can I select an <img> element programmatically using JavaScript?

I have an <img> in an HTML document that I would like to highlight as though the user had highlighted it using the mouse. Is there a way to do that using JavaScript?
I only need it to work in Mozilla, but any and all information is welcome.
EDIT: The reason I want to select the image is actually not so that it appears highlighted, but so that I can then copy the selected image to the clipboard using XPCOM. So the img actually has to be selected for this to work.

Here's an example which selects the first image on the page (which will be the Stack Overflow logo if you test it out on this page in Firebug):
var s = window.getSelection()
var r = document.createRange();
r.selectNode(document.images[0]);
s.addRange(r)
Relevant documentation:
http://developer.mozilla.org/en/DOM/window.getSelection
http://developer.mozilla.org/en/DOM/range.selectNode
http://developer.mozilla.org/en/DOM/Selection/addRange

You might also want to call s.removeAllRanges() before s.addRange(r).

What, exactly, are you trying to do? If you're using XPCOM, you're presumably writing an application or an extension for one; can't you just get the image data and put it on the clipboard directly?

My personal choice for selecting elements is jquery:
Then to get the element of your choice is:
$("img#YOURIMAGEHERE").focus();

You can swap the source of the image, as in img.src = "otherimage.png";
I actually did this at one point, and there are things you can do to pre-load the images.
I even set up special attributes on the image elements such as swap-image="otherimage.png", then searched for any elements that had it, and set up handlers to automatically swap the images... you can do some fun stuff.
Sorry I misunderstood the question! but anyways, for those of you interested in doing what I am talking about, here is an example of what I mean (crude implementation, I would suggest using frameworks like jQuery to improve it, but just something to get you going):
<html>
<body>
<script language="javascript">
function swap(name) {
document.getElementById("image").src = name;
}
</script>
<img id="image" src="test1.png"
onmouseover="javascript:swap('test0.png');"
onmouseout="javascript:swap('test1.png');">
</body>
</html>

The basic idea of the "highLight" solution is ok, but you probably want to set a "static" border style (defined in css) for the img with the same dimensions as the one specified in the highLight method, so it doesn't cause a resize.
In addition, I believe that if you change the call to "highLight(this)", and the function def to "highLight(obj)", then you can skip the "document.getElementById()" call (and the specification of the "id" attribute for "img"), as long as you do "obj.style.border" instead.
You probably also need to spell "highLight" correctly.

Give the img tag an ID. Use document.getElementById('id').
<script type="text/javascript" language="javascript">
function highLight()
{
var img = document.getElementById('myImage');
img.style.border = "inset 2px black";
}
</script>
<img src="whatever.gif" id="myImage" onclick="hightLight()" />
EDIT::
You might try .focus to give it focus.