We Keep Coding

How can I hide some elements when showing another?

I'm finishing my website and I have a script which is hiding or showing a div when a button is pressed.
Here is code :
function display(id) {
var e = document.getElementById(id);
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
But this code is not truly what I'd like because I only want that one div can be displayed at the same time (ex : if div 4 is active and the user need to see the div 2, it has to hide the first one). I have just used JS for quick things therefore I don't have any idea how to do this.
Also would it be possible to hide a specific div depending from which link the user comes on the page.
Exemple of my html :
<a onclick="display('1_1_1')">button</a>
<div id="1_1_1" class="well" style="display: none;">
<h1>Title</h1>
</div>
Thank you for your help !

It is better to add a class which contains display: none like
.no-display {
display: none;
}
then just add or remove that class when you click on a div like
parentDiv.addEventListener("click", function() {
const elem = getElemenyById("elemID");
if(something) {
elem.classList.add("no-display");
else if(something) {
elem.classList.remove("no-display");
};
});

You can create a class with display property and you can add it using Jquery.
CSS:
.display_none_class {
display: none;
}
Jquery:
<script>
$( "#element_ID" ).addClass( "display_none_class" );
</script>
But this sometimes has aligning issues. So, you can use CSS as:
.display_none_class {
width:0;
visibility: none;
}
You can implement this by toggle class:
$("#button_ID").click(function(){
$("#element1_id").toggleClass("display_none_class");
$("#element2_id").toggleClass("display_none_class");
});
First, add this class to the element which you want to hide first. Then On clicking button, it will toggle the class and will make one element visible and other hide.
First add this

Javascript Looping through functions to make spans hidden and visible

An assignment I have is to make a FAQ page for a website that displays an answer when you click on a question and also only allows one question to be visible at a time. I did this so far:
<li button onclick="answerOne();">question</li>
<span id="FAQA1" style="visibility: hidden; color: red;">answer</span>
<li button onclick="answerTwo();">question</li>
<span id="FAQA2" style="visibility: hidden; color: red;">answer</span>
<li button onclick="answerThree();">question</li>
<span id="FAQA3" style="visibility: hidden; color: red;">answer</span>
And my Javascript looks like this:
function answerOne() {
document.getElementById("FAQA1").style.visibility = "visible";
document.getElementById("FAQA2").style.visibility = "hidden";
document.getElementById("FAQA3").style.visibility = "hidden";
}
function answerTwo() {
document.getElementById("FAQA1").style.visibility = "hidden";
document.getElementById("FAQA2").style.visibility = "visible";
document.getElementById("FAQA3").style.visibility = "hidden";
}
function answerThree() {
document.getElementById("FAQA1").style.visibility = "hidden";
document.getElementById("FAQA2").style.visibility = "hidden";
document.getElementById("FAQA3").style.visibility = "visible";
}
Now this is all well and good but if the page ever gets bigger, you'd have to change every single function. I know there must be a better way to be able to achieve the same result but I seem to have hit a wall. If anyone knows a way to do this, can you point me in the right direction or to a source where I can find it? Many thanks.

You could try something like this:
var current = false;
function makeActive( key ) {
if( current !== false ) {
document.getElementById( "FAQ" + current ).style.visibility = "hidden";
}
document.getElementById( "FAQ" + key ).style.visibility = "visible";
current = key;
}
calling makeActive( "A1" ); would make FAQ item "A1" be visible and the previously active one become invisible

There's a number of ways you can do this. Here's one that doesn't involve so many functions.
Set up your HTML like this:
<li onclick="showAnswer('FAQA1')">question</li>
<span id="FAQA1" class="answer" style="visibility: hidden; color: red;">answer</span>
<li onclick="showAnswer('FAQA2')">question</li>
<span id="FAQA2" class="answer" style="visibility: hidden; color: red;">answer</span>
<li onclick="showAnswer('FAQA3')">question</li>
<span id="FAQA3" class="answer" style="visibility: hidden; color: red;">answer</span>
Notice that all the li elements use the same function and simply pass a string to it. The answer spans all have the same class and a unique id.
Then the Javascript:
function showAnswer(ele) {
[].forEach.call(document.querySelectorAll('.answer'), function(el) {
el.style.visibility = 'hidden';
});
document.getElementById(ele).style.visibility = 'visible';
}
So here, there's a forEach loop on all the elements with class answer (the answer spans). This loops through all the answers and hides them. Then, the last line selects the element with a particular id (that we've passed into the function as a string from the onclick) and sets that answer visible.
A fiddle: https://jsfiddle.net/dsmw0abe/2/
Also, just FYI, keep in mind that visibility is different from display.

You could create a function that allows you to have an unlimited number of questions. By giving every answer span the same class, you do not have to explicitly define each one in your code.
Because your answers start at 1, I am starting the loop at 1 instead of 0.
Example:
window.answerQuestion = function answerQuestion(id) {
var questionEls = document.getElementsByClassName("answer");
for (var x = 1; x <= questionEls.length; x++) {
var question = questionEls[x-1];
if (x === id) {
question.style.visibility = 'visible';
} else {
question.style.visibility = ' hidden';
}
}
};
Demo:
https://jsfiddle.net/j3k89o5a/

One approach is to to start w/ all answers hidden then listen for an event within the div at which time you can capture which item was clicked and toggle visibility of nearest following answer. If it is clicked again, it will toggle that answer closed. This allows the user to open each question as they see fit and prevents the page from jumping around - i.e. closing previous answer when a new question is clicked.
For Example
HTML
<div class="faq">
<h1>First Question</h1>
<p>Answer to the question</p>
<h1>Second Question</h1>
<p>Answer to the question</p>
<h1>Third Question</h1>
<p>Answer to the question</p>
</div>
CSS
.faq {
display: none
}
Javascript/jQuery (could be done w/ vanilla js, if needed)
$(function() {
$('.faq h1').click(function() {
$(this).next('p').slideToggle(400);
});
});

How to use javascript to hide and let divs reappear

I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.
Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.
This is my javascript:
<script>
function changeToHome() {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToJob() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
function changePageRight() {
var displayValue5 = document.getElementById('mainmain').style.display;
var displayValue5 = document.getElementById('mainmain2').style.display;
var displayValue6 = document.getElementById('mainmain3').style.display;
var displayValue7 = document.getElementById('mainmain4').style.display;
if (document.getElementById('mainmain').style.display == "block") {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
}
else if (document.getElementById('mainmain2').style.display == "block") {
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
}
else if (document.getElementById('mainmain3').style.display == "block") {
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
else if (displayValue8 == block) {}
}
function changePageLeft() {
var displayValue = document.getElementById('mainmain').style.display;
var displayValue2 = document.getElementById('mainmain2').style.display;
var displayValue3 = document.getElementById('mainmain3').style.display;
var displayValue4 = document.getElementById('mainmain4').style.display;
if (displayValue == "block") { }
else if (displayValue2 == "block") {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
}
else if (displayValue3 == "block") {
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
}
else if (displayValue4 === "block") {
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
}
</script>
Now I have a few divs that look like this:
<div id="mainmain4">
<img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;" src="Untitled-22.png" />
<h2> My name </h2>
<p>Hi,</p>
<p>Some text</p>
</div>
With these css atributes:
#mainmain {
float: left;
width: 575px;
display: block;
position: relative;
}
And all other divs with display: none; so I can change this to block and the one that was block to none.
For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.
Can someone explain me what I do wrong?

You don't tell the browser which divs shall be displayed on load. You can use theonloadevent for this:
<body onload="changeToHome()">
One additional hint: you maybe don't want to use inline JavaScript and CSS.

jQuery is as this simple:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
toggle!
<div id="mainmain">test text</div>
<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() {
$('.toggle-container').on('click', function(e) {
e.preventDefault(); // this prevents the real href to '#'
// .toggle() is like "on / off" switch for hiding and showing a container
$($(this).data('container')).toggle();
});
});
</script>
This function can be reused, because it is based on classes instead of id's.
Check this JSFiddle: http://jsfiddle.net/r8L6xg15/

Maybe this is of some use. I've tried to make a page control-like behaviour. You can select any container div and put elements in there that have the class 'page'. The JavaScript code will let you navigate those with buttons.
You can make it more fancy by adding the buttons through JavaScript. What you then have is basically a list of pages which are normally displayed as regular divs, but when the script kicks in, it changes them to a page control.
You can call this for any parent element, and in that sense it behaves a bit like a jQuery plugin. It is all native JavaScript, though. And not too much code, I hope. Like you said, I think it's good to learn JavaScript at first. It is very powerful by itself, and it's becoming increasingly powerful. jQuery adds a lot of convenience functions and provides fallbacks in case browser don't support certain features, or when implementations differ. But for many tasks, bare JavaScript will do just fine, and it certainly can't hurt to know your way around it.
Press the 'Run this snippet' button at the bottom to see it in action.
function Pages(element)
{
// Some initialization
var activePage;
// Find all pages within this element.
var pages = document.querySelectorAll('.page');
var maxPage = pages.length - 1;
// Function to toggle the active page.
var setPage = function(index)
{
activePage = index;
for (p = 0; p <= maxPage; p++)
{
if (p == activePage)
pages[p].className = 'page active';
else
pages[p].className = 'page inactive';
}
}
// Select the first page by default.
setPage(0);
// Handler for 'previous'
element.querySelector('.prev').onclick = function()
{
if (activePage == 0)
return;
setPage(activePage - 1);
}
// Handler for 'next'
element.querySelector('.next').onclick = function()
{
if (activePage == maxPage)
return;
setPage(activePage + 1);
}
// Add a class to the element itself. This way, you can already change CSS styling
// depending on whether this code is loaded or not. So in case of an error, the
// divs are just all show underneath each other, and the nav buttons are hidden.
element.className = element.className + ' js';
}
Pages(document.querySelector('.pages'));
.pages .page {
display: block;
padding: 40px;
border: 1px solid blue;
}
.pages .page.inactive {
display: none;
}
.pages .nav {
display: none;
}
.pages.js .nav {
display: inline-block;
}
<div class="pages">
<button class="nav prev">Last</button>
<button class="nav next">Next</button>
<div class="page">Page 1 - Introduction and other blah</div>
<div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
<div class="page">Page 3 - Overview of our products
<ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
</div>
<div class="page">Page 4 - FAQ</div>
<div class="page">Page 5 - Contact information</div>
</div>
To dos to make this a little more professional:
Add the navigation through JavaScript
Disable the buttons when first/last page has been reached
Support navigation by keys too (or even swipe!)
Some CSS transform (fade or moving) when toggling between pages
Smarter adding and removing of classes. Now I just set className, which sucks if someone would like to add classes themselves. jQuery has addClass and removeClass for this, which is helpful. there are also stand-alone libraries that help you with this.
Visible indication of pages, maybe with tabs at the top?

Javascript Collapsible Menu (hide the other elements)

I have the following working Javascript function:
function collapsible(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
When I use the following in html code it displays or hides the "element" div:
<li>Element</li>
Thats working fine. But the problem is, that I want to use the function for multiple links, and then the other elements, that were clicked before, stay, open.
How can I reprogram the code, so that only one div stays open and the other gets closed if i click on another link?
Thanks beforehand!

If you could use jQuery and more importantly jQueryUI accordion I think it would accomplish exactly what you're looking for.
However, without using those two, here is how I would structure it. Like mentioned above, I would use classes to modify the styles of the divs you want shown or hidden. Then the js code can just toggle those classes on each of your elements. The slightly more difficult part (without jquery) is modifying class values since in your final application you may have lots of classes on each div. This is just a very crude example to get you going.
Working JSFiddle Example
Sample DOM
<div >
<li>Element1</li>
<div id='elem1' class='myelem visible'>
Element 1 contents
</div>
</div>
<div >
<li>Element2</li>
<div id='elem2' class='myelem'>
Element 2 contents
</div>
</div>
<div >
<li>Element3</li>
<div id='elem3' class='myelem'>
Element 3 contents
</div>
</div>
Sample JS
window['collapsible'] = function(zap) {
if (document.getElementById)
{
var visDivs = document.getElementsByClassName('visible');
for(var i = 0; i < visDivs.length; i++)
{
visDivs[i].className = visDivs[i].className.replace('visible','');
}
document.getElementById(zap).className += " visible";
return false;
}
else
return true;
}
Sample CSS:
.myelem {
display: none;
}
.visible {
display: block;
}

The way to go is to create a class(or maybe two), like collapsible and active or open that has this style(display: block or none) and then you working adding or removing the class.
The logic would be:
Links that has the class collapsible when clicked would add the active or open class which would give the behavior that remains opens(or active) by css.
If you want to hide others elements you would look for the elements with the class collapsible and then remove the active(or open) class if has any.

Here is my solution: http://jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.

Show and hide multiple DIVs with same class, but different IDs on clicking submit

I have a number of DIVs with the same class applied, but unique IDs. I want all the DIVs to be hidden on page load, then when the submit button is clicked I want one of the DIVs (determined by the ID) to become visible.
I thought the best way to do this would be using CSS classes.
I have set their default class in CSS to "inactive" with .configImageTitleInactive {display:none;}
I have a second class "active" with .configImageTitleActive {display:block;}
I have already defined and successfully populated the global variables temp1, temp2 and temp3, as these are being used elsewhere on the page.
When the submit button is clicked I need the code to:
Check if any of the DIVs already have the configImageTitleActive applied to the class and if so, change that class back to configImageTitleInactive.
Collate the 3 temp variables together (not numerically as these variables contain letters)
Compare the combined value against the IDs of the DIVs and switch on the visibilty of that DIV
The javascript code is below:
$(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-xos');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uos"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-uos');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uod"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-uod');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else {
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-xod');
$configImageTitleTemp.addClass("configImageTitleActive");
};
});
});
And the HTML:
<div class="configImageTitleBlock">
<div class="configImageTitleInactive" id="cp-xos">I am 1 CP-XOS</div>
<div class="configImageTitleInactive" id="cp-uos">I am 2 CP-UOS</div>
<div class="configImageTitleInactive" id="cp-uod">I am 3 CP-UOD</div>
<div class="configImageTitleInactive" id="cp-xod">I am 4 CP-XOD</div>
</div>
I'm open to suggestions, if there is a better way to do this.
Thank you in advance for your help.

Hm, I see you are using jQuery but not using the full power of it. Here's how you can do your task:
var configImageTitle = temp1 + temp2 + temp3;
$('div.configImageTitleActive').removeClass("configImageTitleActive").addClass("configImageTitleInactive");
$('#'+configImageTitle).addClass("configImageTitleActive");
ADDED:
As about doing it better:
<div class="configImageTitleBlock">
<div class="block" id="cp-xos">I am 1 CP-XOS</div>
<div class="block" id="cp-uos">I am 2 CP-UOS</div>
<div class="block" id="cp-uod">I am 3 CP-UOD</div>
<div class="block" id="cp-xod">I am 4 CP-XOD</div>
</div>
------- CSS --------
.configImageTitleBlock div.block {
display: none;
}
.configImageTitleBlock div.block.active {
display: block;
}
------- CSS --------
...eventandstuff(function() {
var activeElem = temp1 + temp2 + temp3;
$('.configImageTitleBlock div.block.active').removeClass("active");
$('#'+activeElem).addClass("active");
});
CSS has priorities of how properties are applied. In essence - the more detailed definition is in CSS - the higher priority it has. For example div {display: none} has lower priority than div.someclass {display: block}.
So in essence, I defined a class active, and a CSS rule for it .block.active which is more specific than just .block, that's why when it's applied, the rule from .block.active gets higher priority.
This approach is better because you don't need to define two separate classes for active and inactive. You can only use the active one.
Another advice: don't make classes that are context-specific, like configImageTitleInactive. Better make a generic class inactive or active and then just write more specific rule, like .configImageTitleBlock .active - this makes it more understandable and code is cleaner.

I think it would be better not to remove the main class and simply add class "active" instead, then check if element has class "active"
CSS:
<style>
.configImageTitle { display: none; }
.configImageTitle.active { display: block; }
</style>
JQuery:
$(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
$("div.configImageTitle").hasClass("active") ? $("div.configImageTitle").removeClass("active") : "";
var configImageTitleTemp = $("#cp-xos");
$configImageTitleTemp.addClass("active");
} else {
/* and so on */
}
});
});

You could use a better logic like try setting all the divs visibility:hidden like shown below
<div class="configImageTitleInactive" id="cp-xos" style="visibility:hidden">I am 1 CP-XOS</div>
and from javascript access the div and set its visibilty to visible.
Thanks
AB

I guess pretty much what #Max wrote, just with a running example:
http://jsbin.com/agawov/11/edit
$( document ).ready(function() {
$(document)
.find('.configImageTitleBlock > div.configImageTitleActive')
.removeClass("configImageTitleActive");
$(document)
.find('.configImageTitleBlock > div#cp-xos')
.removeClass('configImageTitleInactive')
.addClass('configImageTitleActive');
});
Cheers.
Vitor.