Is this an acceptable way to call a div with javascript?

html

<button id="openImg">Click here to open</button>
	<button id="closeImg">Click here to close</button>
	<div id="myPics">
		<img src="ga1.jpg">
	<img src="ga2.jpg">
	</div>

css

#myPics {
	display: none;
}

js

var openImg = document.getElementById('openImg');
var closeImg = document.getElementById('closeImg');
openImg.onclick = function() {
    myPics.style.display = "block";
}

closeImg.onclick = function() {
    myPics.style.display = "none";
}

What exactly are you wanting to accomplish?

FYI - instead of styling directly with the id selector, it is typically better to create a class and add or remove it. For example, you could create a class named hidden:

.hidden {
  display: none;
}

This way, you could use this class on many elements instead of just one.

<button id="openImg">Click here to open</button>
<button id="closeImg">Click here to close</button>
<div id="myPics" class="hidden">
  <img src="ga1.jpg">
  <img src="ga2.jpg">
</div>

JavaScript

var openImg = document.getElementById('openImg');
var closeImg = document.getElementById('closeImg');
openImg.onclick = function() {
    myPics.classList.remove('hidden');
}

closeImg.onclick = function() {
    myPics.classList.add('hidden');
}

I just want to get the images when i click the button to open which is what my code is doing already but wanted to know if this is the right way or at least acceptable

See my last edited reply.

so when could be right to style directly using the id or class selector?

Class selector is fine. The id selector is rarely used normally.

perfect thanks alot im new with javascript thanks again