Switching between display:none and display:block with JavaScript?

Question

So, my goal is to make my first div

<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>

change the display of 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>

when its clicked. To do so, I used this bit of JS

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

and it works how I want it to, but now I need it so when I click on div2, it changes back to hidden. How do I do this?

beto · Accepted Answer · 2015-03-21 20:32:45Z

1

you can just create another function to hide it

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

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

you can also create a function to toggle classes (visible/hidden).

answered Mar 21, 2015 at 20:32

beto

431 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Switching between display:none and display:block with JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related