We Keep Coding

Making a JS toggle div close when another is opened, and change image on click

I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!

You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});

Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.

When click on sidebar, change only part of the screen

I have a question, which I can't ask directly, but will try to explain as much as I can, so you can help me.
The thing is next: I am making a project about some football league, and I have a sidebar which lists rounds of the competitions like this
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
It's nothing much, as I am trying to keep it simple. I will make those clickable, but I don't want them to lead me to another page, I want them just to change the part of the main container of the page.
Something just like on http://www.flashscore.com. When you click to change date, the url stays flashscore.com, but the page changes to the date that you clicked.
I know this all sounds crazy, but if you understand me, I will explain even further with whatever you need me to.
Also, I am fairly new to Javascript, but will try to incorporate it into the website I am making, as I think this is pure javascript.

Look into AJAX, that is what you will want to do in order to grab new info from a server without doing a full page postback / reload. It will be mostly JS with maybe some CSS to show / hide content. I'm on mobile so I can't give a great demo, but I'll try when I get off work.
EDIT: looks like I thought you were asking about loading new data. Should be easier than that if you just want to change content to display. I'll post more details later
Update: relevant fiddle: https://jsfiddle.net/44ka1be6/
html
<div class="wrapper">
<div class="sidebar">
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
<div>
Stuff 3
</div>
</div>
<div id="content">
Default stuff
</div>
</div>
js
$(document).ready(function() {
$('.sidebar div').click(function(e) {
$('#content').text($(this).text())
})
})
css
.sidebar, #content {
display: inline-block;
}
.sidebar div {
border: 1px solid black;
font-size: 18px;
padding: 8px 5px;
}
.wrapper {
border: 1px solid black;
}

It is very hard to answer without details, but you can make the main body of the page in an element (div for example) and write to the innerHTML when they click on a link. Depending on what you want to go in the main body, you can have it all as strings in JS, or preferably load the data through AJAX. See: https://www.w3schools.com/xml/ajax_intro.asp. They have a lot of good example code.

In case you just want to update your container with a new static content, you can just add a click event listener to your sidebar:
sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
container.innerHTML = "New content";
});
#sidebar {
float: left;
}
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
<div id="container">Content</div>

Whats the best way to fix HTML Layout problems? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a site where I'm trying to modify a chat applet (a javascript applet loaded from off-site). I'm positioning a graphic over part of it and adding some code to expand it when I'm not online/available (it will show a form, and I want the whole form to be visible).
Everything works fine, except that the positioning will fail on either Chrome or Firefox. When I fix one, it breaks the other. I'm thinking of using browser detection to fix it, but the positioning I'm using is pretty simple. I'm wondering if one browser or the other isn't following a standard, or am I doing something wrong? Basically, the image I'm putting over the applet is taking up space on the page and pushing the chat applet down in some instances and not in others.
Mobile and Desktop support required (currently displays the same on each). Page in question is too big to post here but I'll give a link so you can view the source (currently has hacks to display correctly on Firefox, and Chrome shows a large gap). https://eddon.systems/joomla/index.php/contact-evan
Here's the code in question:
<div id="chat-height" style="height: 24em;">
<div id="ed" class="pull-right" style="z-index: 1000006; position:relative; right: 0; top: -3em;">
<img src="/img/grasshopper.png" />
</div>
<div id='tawk_55b4804ed05623730af6f54a' style="position: relative; top: 0em;"></div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var $_Tawk_API={embedded:'tawk_55b4804ed05623730af6f54a'},$_Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/55b4804ed05623730af6f54a/19r4labog';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);})();
$_Tawk_API.onStatusChange = function(status){
if (status === 'offline'){
document.getElementById('chat-height').style.height="38em";
document.getElementById('tawkchat-maximized-iframe-element').style.height="38em";
document.getElementsByClassName("contact-mobile")[0].style.visibility="visible";
} else {
document.getElementById('chat-height').style.height="24em";
document.getElementById('tawkchat-maximized-iframe-element').style.height="23.5em";
document.getElementsByClassName("contact-mobile")[0].style.visibility="hidden";
}
}
</script>
<!--End of Tawk.to Script-->
</div>

I think your problem is with this element: <div id="ed">. It is a <div> with position:relative;, meaning it will display block and any element after it will be put on a new line, which is what is creating the gap.
To fix it try updating your style for the wrapping div by adding a position:relative; like this:
#chat-height{
position:relative;
}
Then change the style of your <div id="ed"> to position:absolute; in order to position it absolutely to your wrapping div.

Creating HTML buttons dynamically using HTML, CSS and Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I wish to dynamically add a button on a html form so that a user can upload multiple files when filling-in the form. The css design is both elastic and fluid and the intention is that whenever a user clicks on the "add file" link, a new button is added to allow the user to browse for the file, add it and finally upload it. The buttons should appear on the main content area of the page and should not overflow outside the footer area and should be rendered vertically with each button appearing on a newline. The code below does exactly that. This question is very much related to this question but with a twist of the css (design) requirements.
function myFunction() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Browse..");
btn.appendChild(text);
var newbutton = document.getElementById("button"); //new div button element introduced on html.
document.body.insertBefore(btn,newbutton);//insert before method
}
/*Mailu*/
div {
padding: 1px 0;
}
#header {
background: #DDDDDD;
}
#footer {
clear: both;
background: #DDDDDD;
}
/*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
button{display:block;}
<!DOCTYPE html>
<html>
<body>
<link href="button.css" rel="stylesheet" type="text/css"/>
<div id = "header">
<p>Home</p>
</div>
<p>Upload file.</p>
First name: <input type = "text" name = "Firstname"><p>
<div id = "button"> <!--added div button on html-->
<a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
</div>
<div id="footer"><p>footer</p>
</div>
</body>
</html>
[1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick

Replace:
#button {
With:
button {
The # is an id selector, meaning it will apply the styles to the element that has id="button".
If you leave out the #, it will match all <button> elements.

How could I implement something like "thesheepmarket" with CSS/JS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to make something similar to thesheepmarket.com in how they have a bunch of small images together, and when you scroll over one it pops out like that so you can see the image larger.
I would like to do this with CSS/JS.
Any help would be great.
So I can basically do everything, except I am not sure how to make the div popup a bit below:
#test {
height: 10px;
background: red;
width: 10px;
font-size: 1px; /* IE 6 */
}
#test:hover {
height: 100px;
width: 100px;
border-style: solid;
border-width: 1px;
}
$('#test').hover(function() {
console.log('hoved');
});
I am basically just looking for the best way to make the div popup below the one that it is currently hovering over.

consider using something like this plugin:
http://dropthebit.com/demos/photobox/
From the Plugin website:
HTML
<div id='gallery'>
<a href="http://www.somedomain.com/images/image1_large.jpg">
<img src="http://www.somedomain.com/images/image1_small.jpg" title="photo1 title">
</a>
<a href="http://www.somedomain.com/images/image2_large.jpg">
<img src="http://www.somedomain.com/images/image2_small.jpg" alt="photo2 title">
</a>
<a href="http://www.somedomain.com/images/image3_large.jpg">
<img src="http://www.somedomain.com/images/image3_small.jpg" title="photo3 title">
</a>
<a href="http://www.somedomain.com/images/image4_large.jpg">
<img src="http://www.somedomain.com/images/image4_small.jpg" alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
</a>
<a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
<img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg" title="PEOPLE ARE AWESOME 2013 FULL HD ">
</a>
</div>
JS
<script>
// applying photobox on a `gallery` element which has lots of thumbnails links. Passing options object as well:
//-----------------------------------------------
$('#gallery').photobox('a',{ time:0 });
// using a callback and a fancier selector
//----------------------------------------------
$('#gallery').photobox('li > a.family',{ time:0 }), callback);
function callback(){
console.log('image has been loaded');
}
// destroy the plugin on a certain gallery:
//-----------------------------------------------
$('#gallery').data('_photobox').destroy();
// re-initialize the photbox DOM (does what Document ready does)
//-----------------------------------------------
$('#gallery').photobox('prepareDOM');
</script>