Show or hide a div via button and JavaScript - javascript

I need hide a div opening a webpage (display is set on "none"), but clicking on a button the div has to appear.
I'd like to know why the code works until I declare css styles into each div: if I define css in a style block into the head (commented below) and remove style tag from each div, the JavaScript looks almost death.
<!DOCTYPE html>
<HTML lang="it">
<HEAD>
<TITLE>Prova visualizzazione div via button</TITLE>
<meta charset="UTF-8" />
<script>
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
}
</script>
<!-- <style type="text/css">
header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}
</style> -->
</HEAD>
<body>
<header id="header" style="width: 100%;
background-color: #22ffff;
height: 40px;">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari" style="width: 49%;
background-color: #ff22ff;
height: auto;
display: none;">
Questo è il div appari
</div>
</body>
</html>

element.style only gets inline styles, what you are looking for is the computedStyle
So there for you need to use window.getComputedStyle()
See code sample:
function apriMenu() {
var idTag;
idTag = document.getElementById("appari");
var displayStyle = window.getComputedStyle(idTag).display;
if (displayStyle === "none") {
idTag.style.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (displayStyle === "block") {
idTag.style.display = "none";
}
}
header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}
<header id="header">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari">
Questo è il div appari
</div>

Without digging into it too deeply, you could just add a final else statement to show the element if style.display is empty. Just use the reverse case if you want the element to be shown initially.
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
else{
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
}
}

Here's another simpler way to achieve the same thing: http://next.plnkr.co/edit/ZsAKiwxVA3riRx5Y?open=lib%2Fscript.js
function toggleMenu() {
var element = document.getElementById("appari");
element.classList.toggle("showMenu");
}
You basically just need to toggle a class on and off to hide/show the menu. I've found using a class to do so is quite simple.
Good luck!

Related

How to set initial state of div element to hide

I created a simple function which shows or hides a div tag on clicking a button but how can i set it to initially be hiding and after clicking the button it is displayed?
Just set it's display style property to None.
element = document.getElementById('toggle');
button = document.getElementById('toggle-button');
function hideAndShow(){
if(element.style.display == 'none'|| element.style.display == '') // checks if the display property is set to none or not
{
element.style.display = 'Block'; // if set to none then set the display property to block
button.innerHTML = 'Hide'; // changes the button's text
}
else{
element.style.display = 'None'; // otherwise set it to none
button.innerHTML = 'Show';
}
}
#toggle{
width: 100%;
margin: auto;
height: 50px;
display: None; /*this set's the divison to a hidden state by default*/
background-color: rgba(248,25,34,0.8);
}
#toggle-button{
width: 100%;
margin: 5px;
height: 25px;
padding: 5px;
color: rgba(25,25,67,0.5);
}
<div id='toggle'></div>
<button id='toggle-button' onclick='hideAndShow()'>Show</button>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
};
function toggle() {
document.getElementById('test').style.display = 'block';
}
.hide {
display: none;
}
<div id="test" class="hide">Test</div>
<button onclick="toggle()">Toggle</button>
function btnClick(){
const divElement = document.getElementById('myDiv');
if (divElement.classList.contains("show")) {
divElement.classList.remove("show")
divElement.classList.add("hide")
} else {
divElement.classList.add("show")
divElement.classList.remove("hide")
}
}
.hide{
display: none
}
.show{
display: block
}
<div id="myDiv" class="hide">
Hello, I am Div HTML Content
</div>
<button onclick="btnClick()">Click Me!!</button>

All Elements in Div Not Appearing when Display is Set from None to Block

I am trying to make a popup that will appear when a user completes a certain task. This popup should contain a link saying Close (allowing them to close the popup) whenever it appears. My problem is that when the display is set from none to block, the link does not show up although it is inside the div.
function closePopup() {
document.getElementById("popup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('popup').innerHTML = 'This is the popup';
}
#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}
<body>
<div id="popup">
Close
<p></p>
</div>
Open
</body>
You need to add innerHTML to that paragraph not the div.
function closePopup() {
document.getElementById("popup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('text').innerHTML = 'This is the popup';
}
#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}
<body>
<div id="popup">
Close
<p id="text"></p>
</div>
Open
</body>
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("open_popup").style.display = "block";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("open_popup").style.display = "none";
document.getElementById('popup_text').innerHTML = 'This is the popup';
}
#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}
<body>
<div id="popup">
<p id="popup_text"></p>
Close
</div>
<a id="open_popup" href="#" onclick="openPopup()">Open</a>
</body>
I have modified your script little bit, Added two more functionalities in closePopupfunction and same been done in openPopup function according, also have updated body tags in order to reflect the changes according to your needs.
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("closepoup").style.display = "block";
document.getElementById('closepoup').innerHTML = ' Open';
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('popup').innerHTML = ' This is the popup';
document.getElementById('closepoup').innerHTML = ' Close';
}
#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}
<body>
<div id="closepoup">
Open
</div>
<div id="popup"></div>
</body>

My button (EventListener) has limited click only

I am making a modal, so i made an example to make it simple, Program goes, when i click any button, a modal will show and the page too but it will only show specific page depends on the button, in this case, uno button is for page1, dos for page2 and tres for page 3.
everything goes where i wanted until i clicked all the button, Just to show you my problem, try clicking step by step from uno to tres, then click uno again, and that's it the pages does not change at all.
can you please figure out whats wrong with my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 400px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
</style>
</head>
<body>
<p>Click the button to Show Modal.</p>
<div class="btns">
<button class="myBtn" id="uno">uno</button>
<button class="myBtn " id="dos">dos</button>
<button class="myBtn "id="tres">tres</button>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
<!--JS-->
<script>
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for(let i=0; i<btn.length;i++ ){
btn[i].addEventListener('click', () => {showModal(); getId(); displayPage()});
}
function showModal(){
getModal.style.display = "block";
}
function getId(){
//console.log(event.target.id);
}
function displayPage(){
var btnId = event.target.id;
if(btnId == "uno"){
getPages[0].style.display = "block";
}else if(btnId == "dos"){
getPages[1].style.display = "block";
}else if(btnId == "tres"){
getPages[2].style.display = "block";
}
}
</script>
</body>
</html>
<html>
You are not hiding the other modal pages when you trigger the display of one of them, therefore they are all displayed at the same time once you clicked all buttons, and the one with the highest z-index (in this case automatically determined by element order in the markup) overlays all others. Set the display property to block or none depending on whether it's the current modal page or not. You can also pass the index of the modal page to the displayPage() function, so you don't need those if statements to check for the button text.
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', () => {
showModal();
displayPage(i)
});
}
function showModal() {
getModal.style.display = "block";
}
function displayPage(pageIndex) {
var btnId = event.target.id;
getPages.forEach(function(modalPage, index) {
getPages[index].style.display = index === pageIndex ? "block" : "none";
});
}
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 400px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
<p>Click the button to Show Modal.</p>
<div class="btns">
<button class="myBtn" id="uno">uno</button>
<button class="myBtn " id="dos">dos</button>
<button class="myBtn " id="tres">tres</button>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
The problem is with your display function. You must hide other pages when you want to show your new one. So add this function to your code.
function hideAllPages(){
getPages[0].style.display = "none";
getPages[1].style.display = "none";
getPages[2].style.display = "none"
}
}
then call it the first line of displayPage function.
function
// Hide all pages first
hideAllPages();
var btnId = event.target.
if(btnId == "uno") {
getPages[0].style.display = "block"
} else if (btnId == "dos") {
getPages[1].style.display = "block"
} else if (btnId == "tres") {
getPages[2].style.display = "block"
}
}
Also you can have some base structure for your code like:
save id of pages or (better solution) get id of the page with data-* (Exp. data-page-id="uno") in html structure and retrieve it in js with listen to click event of page button click and use getAttribute function to see which page to show
I hope it helps :)

Javascript: can't change background on div click or change marginLeft on element

I tried to test changing backgroundColor and marginLeft on this simple example: https://jsfiddle.net/ntqLo6v0/2/
and couldn't make it work.
var collapsed = 0;
$('[data-toggle=collapse-button]').click(function() {
if (collapsed == 0) {
close();
} else {
open();
}
});
function close() {
document.getElementById("button").style.backgroundColor = "blue";
(document.getElementsByClassName("content")[0]).style.marginLeft = "20px";
collapsed = 1;
}
function open() {
document.getElementById("button").style.backgroundColor = "red";
(document.getElementsByClassName("content")[0]).style.marginLeft = "120px";
collapsed = 0;
}
.content {
background-color: green;
width: 200px;
height: 100px;
}
#button {
background-color: red;
width: 100px;
height: 50px;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" data-toggle="collapse-button">
button
</div>
<div class="content">
some content here
</div>
There is just a little issue: $('[data-toggle=collapse-button]').
You are using jQuery but do not define it. That's why you get a Uncaught ReferenceError: $ is not defined in the console.
Here is your updated fiddle where I added jQuery (in the resources left) in order to make your example running.

Put text in expanding div with onClick

function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
document.getElementById("test").value="on";
document.getElementById("test").style.height="100px";
var div = document.getElementById("test");
var content = document.getElementById("test3");
div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
document.getElementById("test").value="off";
document.getElementById("test").style.height="20px";
var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
}
}
<!doctype html>
<html>
<head>
<style>
#test{
position: absolute;
border-radius: 4px;
background: #CCCC00;
height: 20px;
width: 300px;
border: 1px solid #000000;
}
#test2{
text-align: center;
font-size: 12pt;
}
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
<div id="test">
<div id="test2"><b>Div</b></div>
<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>
I'm trying to make an expandable div container which will display some text inside of it
when opened and then hide it when closed. I managed to make the div expand and close but
I can't figure out how to make the text appear in the expanded box. I can do it by inserting the text in the javascript but I want it set as a variable so i can use the script for multiple pages with different text inside of the div.
I don't know if I've approached it the right way and would like some help, ty in advance.
To display your text just change the style of the div containing your text to display: block:
document.getElementById("test3").style.display = "block";
For your requirements, it would be something like this:
function expand() {
if (currentValue == "off") {
currentValue = "on";
document.getElementById("test").style.height = "100px";
document.getElementById("test3").style.display = "block";
}
else {
currentValue = "off";
document.getElementById("test").style.height= "20px";
document.getElementById("test3").style.display = "none";
}
}
Here you have a working fiddle.

Categories