Home » Javascript » I need help in displaying a div properly

I need help in displaying a div properly

Posted by: admin June 30, 2018 Leave a comment

Questions:

Before we get into it: CSS is not important,don’t look for problems in it, it’s pure Javascript question

So, to make it short: I’ve tried to make it clear in the code itself, I’ve written how it should be working, but short version is that #album is visible by default, if you open any other div, it disappears. Basically Only the currently opened div can be visible, if that’s closed,#albums appears again, and it’s working fine, expect for the #toursdiv2, which has a different way of working than the rest,it’s not triggered the same way, and that’s why I couldn’t figure out a way to make it work like the rest

Please let me know if it’s not clear, I’ll help to understand what I’d like to achieve

I would appriciate if someone could help me, if possible, without removing any part of my code, or only if really necessary.

function showabout(){
	var awards=document.getElementById("awardsdiv");
	var tours=document.getElementById("toursdiv");
	var about=document.getElementsByClassName("about")[0];
	var albums=document.getElementById("albums");
	about.style.display=(about.style.display==="block"?"none":"block");
	if(about.style.display==="block"){
		albums.style.display="none";
		tours.style.display="none";
		awards.style.display="none";
	}
	
	else{
	albums.style.display="block";
	albums.style.WebkitAnimationName="slideIn"; //not important
	}
	// albums.style.display=(albums.style.display==="none"?"block":"none");
	
	
}
function showtours(){
	var awards=document.getElementById("awardsdiv");
	var about=document.getElementsByClassName("about")[0];
	about.style.display="none";
	var albums=document.getElementById("albums");
	var tours=document.getElementById("toursdiv");
	tours.style.display=(tours.style.display==="block"?"none":"block");
	if(tours.style.display==="block" ){
		albums.style.display="none";
		awards.style.display="none";
		about.style.display="none";
		
	}
	
	else{
	albums.style.display="block";
	albums.style.WebkitAnimationName="slideIn"; //not important
	}
}
function showtours2(){
	var awards=document.getElementById("awardsdiv");
	var about=document.getElementsByClassName("about")[0];
	var tours1=document.getElementById("toursdiv");
	var tours2=document.getElementById("toursdiv2");
	tours1.style.display="none";
	tours2.style.display="block";
	if(tours2.style.display==="block"){
		about.style.display="none";
		awards.style.display="none";
		
	}

	else{
		
	albums.style.display="block";
	albums.style.WebkitAnimationName="slideIn"; //not important
	tours2.style.display="none";
	}
	
}
function showtours1(){
	var awards=document.getElementById("awardsdiv");
	var about=document.getElementsByClassName("about")[0];
	var tours1=document.getElementById("toursdiv");
	var tours2=document.getElementById("toursdiv2");
	tours2.style.display="none";
	tours1.style.display="block";
	
	// if(tours2.style.display==="block"){
		// about.style.display="none";
		// awards.style.display="none";
	// }
	// else{
	// albums.style.display="block";
	// albums.style.WebkitAnimationName="slideIn";
	// tours2.style.display=none;
	// }
}
function showawards(){
	var awards=document.getElementById("awardsdiv");
	var about=document.getElementsByClassName("about")[0];
	about.style.display="none";
	var albums=document.getElementById("albums");
	var tours=document.getElementById("toursdiv");
	awards.style.display=(awards.style.display==="block"?"none":"block");
	if(awards.style.display==="block" ){
		albums.style.display="none";
		tours.style.display="none";
		about.style.display="none";
	}
	else{
	albums.style.display="block";
	albums.style.WebkitAnimationName="slideIn"; //not important
	}
}
#menu{
	font-family: 'Source Code Pro', monospace;
	font-weight:bold;
	width:90%;
	height:10%;
	position:absolute;
	left:5%;
}
#menu a{
	color:#bba2a2;
	text-decoration:none;
}
#about,#tours,#channel,#website,#awards,#shop{
	
	height:80%;
	width:8%;
	font-size:20px;
}
#about{
	position:absolute;
	top:5%;
	left:5%;
}
#tours{
	position:absolute;
	top:5%;
	left:20%;
}
#channel{
	position:absolute;
	top:5%;
	left:65%;
}
#website{
	position:absolute;
	top:5%;
	left:50%;
}
#awards{
	position:absolute;
	top:5%;
	left:35%;
}
#shop{
	position:absolute;
	top:5%;
	left:80%;
}
#about span:hover,#tours span:hover,#channel span:hover,#website:hover,#awards span:hover,#shop:hover{
	cursor:pointer;
	border-radius:15px;
	color:red;
	transition:1s;
}
#website a:hover,#channel a:hover ,#shop a:hover{
	transition:1s;
	cursor:pointer;
	color:red;
	transition:1s;
}

.about{
display:none;
}
#toursdiv,#toursdiv2{
display:none;
}
#awardsdiv{
display:none;
}
#toursnext{
	font-size:40px;
	position:absolute;
	top:25%;
	left:30%;
	cursor:pointer;
}
#toursprevious{
	font-size:40px;
	position:absolute;
	top:25%;
	left:30%;
	cursor:pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div id="menu">
<div id="about">
<span class="menus" onclick="showabout()">About</span>

</div>

<div id="tours">
<span class="menus" onclick="showtours()">Tours</span>

</div>

<div id="awards">
<span class="menus" onclick="showawards()">Awards</span>
</div>

</div>
<br><br><br><br>

<div id="albums">
This is <strong>ALBUMS</strong> div, this is visible by default, if any other div is visible, it disappears
</div>
<br><br>
<div class="about">
This is <strong>ABOUT</strong> div, becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>
<br><br>
<div id="toursdiv">
This is the <strong>part 1 of TOURS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
<i title="Click to show part 2" class="fa fa-arrow-right" id="toursnext" onclick="showtours2()"></i>

</div>
<br><br>
<div id="toursdiv2">
This is the <strong>part 2 of TOURS</strong> div, which I can't make to be working the same as the rest of the divs. If this is visible, and you open any other div, you'll see the problem, that I couldn't make it work like the rest of the div when opening new div
<i title="Click to show part 1" class="fa fa-arrow-left" id="toursprevious" onclick="showtours1()"></i>
</div>
<br><br>
<div id="awardsdiv">
This is <strong>AWARDS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>
Answers: