0
(Javascript) help! ...
I would like to not have the huge margin between my two collection menus on an online gallery page im thinking about, while the content is hidden. what is a solution? https://code.sololearn.com/WQH5IBwlKzao/?ref=app
9 Réponses
+ 2
If you're trying to create a grid of images you'll need to specify their css as well in order to accomplish this. You may want to attempt to add them to the code and ask another question if you run into issues, and/or look into using something like bootstrap.
If you mean why isn't the collection div closing when the button is pressed again, it would be due to the fact the the JS function does't specify them to close but only to be displayed when the button is clicked the first time.
This code will work and should be simple enough to understand:
var open1 = false;
var open2 = false;
function first(){
var content = document.getElementsByClassName('collection')[0];
if (!open1) {
content.style.display = "block";
} else {
content.style.display = "none";
}
open1 = !open1;
}
function second(){
var cont = document.getElementsByClassName('collection')[1];
if (!open2) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
open2 = !open2;
}
+ 3
+ 2
HTML
-------
<!DOCTYPE html>
<html>
<head>
<title>online gallery</title>
</head>
<body>
<div class="title">First Collection
<button onclick="first()">●</button>
</div>
<div class="collection">Content</div>
<div class="title">Second Collection
<button onclick="second()">●</button>
</div>
<div class="collection"></div>
</body>
</html>
CSS
-----
body {
background-color: #e3e0e2;
width:250px;
}
.title{
padding: 15px;
margin:10px;
width:250px;
height: auto;
background-color: #f1f1f1;
color: grey;
font-family: cambria;
position: relative;
}
.collection{
padding: 25px;
margin:10px;
width:230px;
height: 100px;
background-color:#f1f1f1;
color:grey;
position: relative;
display: none;
}
button{
float: right;
background-color:#cbcbcb;
color: white;
font-family: cambria;
}
JS
---
var x = 0;
function first(){
if (x===0) {
var content = document.getElementsByClassName('collection')[0];
content.style.display = "block";
}
x++;
}
function second(){
var cont = document.getElementsByClassName('collection')[1];
cont.style.display = "block";
}
+ 2
if (!open1)
is basically saying if not open1 then set the display to block else set it to none. ! is the not operator which will flip the result of the value. open1 is initially false and the ! not flips it and makes it true. if the value of open1 is true it will be flipped so the value is false.
open1 = !open1;
simply changes the value of open1 to the opposite of what it currently is. So, when the button is first clicked the value is false and the if statement runs then the value of open1 is set to the opposite of false which is true. The next time the button is clicked the else statement will run and open1 will be set back to false.
+ 1
from the logic of ur code I was able to find a solution to the dropdown.thank U..
0
im having a problem when im using " display: block; " with images. they all get arranged on block format while im expecting to make them Grid .
any solution for that
0
also why dropdown not closing ?¿
0
does the 1st condition execute as true "if (! open) "??.... also this part part " open=! open "whats happening here ???
0
hey.. I would like to know why onclick display: block;
still organizes the pictures in grid format.while on my computer browser all the images align to the left in block format with the same code.
I want the collection part to be able to dropdown while the images still remain organized in grid... ive tried flex box , no luck.
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
Aujourd'hui en vedette
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Ejercicio Pytho
0 Votes
SQL practice
2 Votes
Game development
0 Votes