New course! Every coder should learn Generative AI!
Try a free lesson0
(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 Answers
+ 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.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Strange narrowing conversion error from FLTK Color to Color Struct, Stroustrup's header Graph.h
0 Votes
Can anyone help me with this?
0 Votes
Python Question
3 Votes
How to learn fast C?
0 Votes
Initials of name
1 Votes
While loop with input dont work
1 Votes
Coder or Programmers
2 Votes