javascript - if overlay is present (element is display: block) push element underneath down -

i have large overlay on site -- powered popify.js overlay works click function binds 'display:block;' (this understanding) element default display: none; simple show / hide. but! content underneath overlapped. it's longer vertical page, trying add condition push element get's overlapped, underneath overlay down (margin-top: 300px;)

but if

.sdetails2 

is no longer display: block; remove margin-top: 300px;

element underneath:

.verticallparallaxwrapper section.content-guide {          margin-top: 300px; // add if .sdetails2 display: block } 

sounds use jquery's .slidetoggle() achieve this. this jsfiddle, perhaps?

js

$('#whatevertriggerspopup').on('click', function() {     $('#thepopup').slidetoggle(); }); 

edit

for margin fix:

css

.toggle-margin {   margin-top: 300px; } 

js

$('#whatevertriggerspopup').on('click', function() {     $('#thepopup').slidetoggle();     $('#thethingbelowthepopup').toggleclass('.toggle-margin'); });