Menu
I have a very, very simple webpage, It consists of a large background image and a button in the centre of this image (the button is placed in a div to position it), I want this button to be clickable, and when clicked, replaced with ANOTHER div which will show a film trailer.
Every solution I come across implements JS and is to show/hide the div and does not replace the show/hide button.
I simply want to SHOW the div, it does not need to be hidden after (as the button will hopefully be replaced anyway).
Almost identical to this example on the Duke Nukem website : http://www.dukenukemforever.com/full/us/
When you click play trailer, it appears central. The only difference between this and what I want to do is I want my button to be central also, and show the trailer over the top of the button (with no ability to hide the trailer after it has begun)
If any one is wondering why I don't just put the trailer on the page and not bother with this is the reason for having it 'show' instead of just embedding the video in a div in the center of the page is that the webpage has a large background which I want to be visible first for impact, then show the trailer.
if this is possible in JS and someone can show me an example, I would be open to that too!
525
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document.
To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
In JavaScript, we can hide the elements using the style. display or by using the style. visibility. The visibility property in JavaScript is also used to hide an element.
You can use the :target selector.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
