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

I can't get the animation speed to work

I'm trying to make a menu (with buttons) that open links.
when you hover on the buttons, a slideDown reveals more information on that link.
I've gotten all those features to technically work, however i can't get the animation speed to go any slower than instantly.
I'm really new to javascript and Jquery, and it took me 2-3 days to get the javascript and CSS to do what i have so far... and yeah it's probably bloated... but i'm still proud i got this done so far :D
PS, I know most menus are made w/ul's but I really like the way the buttons look and detested trying to put the list together. last time i tried used a seperate ul for the information and it kept styling the second list like the first because it was inside it... so annoying. I also tried vertical-link list w/CSS but still think flat 'buttons' are so boring. i really like the 3D esk of the actual html
HTML:
<div class="mainmenu">
<div id="homemenu">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub active">-just a bit about this page</div>
</div>
<div id="photosmenu">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub inactive">-just a bit about this page
</div>
</div>
</div>
javascript/jquery:
$(function(){
var mmbutton = $('.mmbutton');
var start = "http://";
var address = "[my web address"; //add "http:
var about = "[web address]/aboutme.html";
var id = 0;
var rel = 0;
var mmsub = 0;
//<click link buttons:
$(mmbutton).click(function(){
var id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
window.alert("I'm sorry I don't have this page set up yet. Thank you for visiting my page!");
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}});
//>detect hover
$(mmbutton).hover(function(){
id = $(this).attr('id');
rel = '#'+id+'sub';
mmsub = '#'+id+'menu';
console.log('mouseenter'+rel);
$(rel).removeClass('inactive');
$(rel).stop().slideDown(500000);
}, function(){
console.log('mouseleave'+rel);
$(rel).addClass('inactive');
if ( $(this).hasClass('active')) {
$(rel).removeClass('inactive');
console.log('this is active');
}if ($(rel).hasClass('inactive')){
$(rel).stop().slideUp(500000);
}});});
relevante CSS:
.inactive {
display: none;
}
.sub {
transition-duration: 1s;
}

You can do it setting all that info divs to display:none and use slideToggle() function for that. Considering you want to keep the subdiv's opened when you're over them, one option is create a span element that include the button and the subdiv, and apply the hover to that span. So...
HTML:
<div class="mainmenu">
<div id="homemenu">
<span class="subcontainer">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub">-just a bit about this page</div>
</span>
</div>
<div id="photosmenu">
<span class="subcontainer">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub">-just a bit about this page</div>
</span>
</div>
</div>
CSS:
.sub {
display: none;
/*transition-duration: 1s; IMPORTANT: REMOVE THIS!!*/
}
JQUERY:
$('span.subcontainer').hover(function() {
$(this).find('div.sub').slideToggle('slow');
});
IMPORTANT: Check that to make it work you have to remove the transition style you've created for .sub divs (it interfeers with the jquery function).
NOTE: I don't use the div.homemenu or div.photosmenu as the containers for the hover because div's normally have some styles pre-applied by default and can interfeer with the desired behaviour (for example, they normally have width=100% so the hover applies even when you're outside of the button or subdiv in the same line). span is normally more innocuous to use it just as a wrapper.
I hope it helps

Oh! i got it. i was trying to do too much (show off.../ using what im learning).
I removed the line that added and removed the class 'inactive' and just toggled the SlideUp and slideDown when i wanted it too. now i can adjust the animation speed:
(HTML remains unchanged)
CSS: removed the "transition-duration: 1s;"
JavaScript:
$(function(){
var mmbutton = $('.mmbutton');//any/all buttons
var activebut= 0; //detect button classes
var mmdiv = $("div[id$='menu']");//detect button sub info
var start = "http://";
var address = "[address]/index.html"; //add "http://" + [blog or games] + address
var about = "http://[address]/aboutme.html";
var id = 0;
var sub = 0;
var slidespeed= 450; //slideUP/slideDown animation speed //added var for speed
//<click link buttons: (unchanged)
$(mmbutton).click(function(){
id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
location.replace(start+'[address]/aboutme/index.html')
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}
});
//<hover display:
//<detect mouse ON button
$(mmbutton).hover(function(){
id = $(this).attr('id');
sub = '#'+id+'sub';
activebut= $(this);
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideDown(slidespeed);
}
});
//<detect mouse off button AND div
$(mmdiv).mouseleave(function(){
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideUp(slidespeed);
}
});
});

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.

Javascript: Hiding and Showing div tag with a toggle button

I'll get right to it:
What I need to do is hide a particular div with the press of a button, and it's supposed to be a toggle, so basically: Press once to hide, press again to show, press again to hide etc...
I want the hide/show rules to be done in CSS and the interaction in pure javascript (no jquery please). Well this is what I need to do, but I'm not quite sure how to execute the javascript code.
html:
<p class="button">Show/hide<p>
<div> I want to hide this by pressing the button above</div>
css:
#showhide {
display: none;
}
.button {
display: block;
height: 30px;
width: 100px;
background: green;
text-align: center;
padding-top: 10px;
padding-left: 0px;
font: 15px arial bold;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
http://jsfiddle.net/fyUJc/14/
Also, if you think this question doesn't belong here or is stupid, please try to refrain from being rude, I'm just trying to learn here.

You can make use an onclick method. Have your HTML as:
<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>
And have the following JavaScript:
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display=='')
{
e.style.display = 'none';
}
else
{
e.style.display = 'block';
}
}
DEMO

Here is an updated JSFiddle of your code that works with native browser methods and implement a simple toggle component - http://jsfiddle.net/fyUJc/31/
var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
var target = document.querySelector(button.getAttribute('data-target'));
if (target.style.display == "none") {
target.style.display = "block";
button.innerHTML = button.getAttribute('data-shown-text');
} else {
target.style.display = "none";
button.innerHTML = button.getAttribute('data-hidden-text');
}
});
By creating a toggle button you are entering the field of GUI and this is something very complex.
Current browser technologies doesn't provide a rich set of tools to help you with everything you need to handle in GUIs. jQuery is of no help either, as GUIs are more about handling components and state than manipulating the DOM.
Even that the above code works in Chrome, you still need to take care of browser differences in both DOM and event and you will need a better abstraction for the components. There are quite a lot of problems that are not addressed in my code and that will be very difficult to address correctly if you write them from scratch every time. Things like:
How you initialize newly added togglers on the page ?
How you sync the state of the div and the button ?
How you extend and plug into the button behavior ?
I will strongly advise that you look into UI related libraries or frameworks that provide solutions for the common problems. See ReactJS, Dojo or Sencha (ex. ExtJS) to name a few. Look for frameworks that define a Widget/Component life-cycle and ways to extend and define custom ones.
Browser technologies just don't provide the proper abstractions for making UI components.

An alternative solution just using 'onclick' attribute inside your HTML tag:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle(){
var div = document.getElementById("divSection");
if (div.style.display =='block'){
div.style.display = 'none';
return;
}
div.style.display ='block';
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<p class="button" onclick="toggle()">Show/hide</p>
<div id='divSection'> I want to hide this by pressing the button above</div>
</body>
</html>
I hope it helps.

You can add attach an event listener to the P tag and have that call a Toggle() function to swap the display value as shown below.
Example here - JSFiddle
function Toggle() {
var div = document.getElementsByTagName('div')[0];
if (div.style.display == 'none') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
(function () {
var button = document.querySelectorAll(".button");
for (var i = 0; i < button.length; i++) {
if (button[i].addEventListener) {
button[i].addEventListener("click", function () {
Toggle();
});
} else {
button[i].attachEvent("click", function () {
Toggle();
});
}
}
})();
Though you would be better adding IDs to your elements to make them easier to reference.

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.