Переключение между дисплеем: нет и отображение: блок с JavaScript?

Question

Итак, моя цель состоит в том, чтобы сделать мой первый ДИВ

<a href="#" onclick="showVideo1()"> 
<div style="width:42.5%; height:50%; position:absolute; top:5%; left:5%;  background:black;" onclick="toggle_visibility('video1');"> 
<video style="width:100%; height:100%" autoplay="autoplay" loop="true" muted> 
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
</video> 
</div> 
</a> 

изменить отображение div2

<div class="hiddiv" id="video1"> 
<div class="vidcont"> 
<video style="width:100%; height:100%;"> 
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
</video> 
</div> 
</div> 

при его нажатии. Для этого я использовал немного JS

<script type="text/javascript"> 
function showVideo1() { 
document.getElementById('video1').style.display = "block"; 
} 
</script>` 

и она работает, как я хочу, но сейчас мне нужно это так, когда я нажимаю на div2, она меняется обратно скрыта. Как мне это сделать?

Answer 1

вы можете просто создать еще одну функцию, чтобы скрыть это

<div class= "hiddiv" id="video1" onclick="hideVideo()"> 
... 
</div> 

<script type="text/javascript"> 
function hideVideo() { 
document.getElementById('video1').style.display = "none"; 
} 
</script> 

вы также можете создать функцию для переключения классов (видимый/скрытый).