Show button

[jojo_molat]

I need a show button when is clicked it disappears and on that place shows text , image or an video.Even button doesn't have to look as a button , it can be image or a text.I have found that on http://nba.lemons.se/ and on that site it shows result when button is clicked , I need something similar but can't find html code for that.If someone knows that , please post html code of that button.

[rangana]

A very basic idea that should help you more forward:


<span onclick="var el=document.getElementById('container');el.style.display=el.style.display=='none'?'':'none';" style="cursor:pointer;">Click me to show/hide element</span>
<div id="container" style="display:none;"><br />This is the text</div>

[jojo_molat]

Button should disappear when is clicked and on the very same place should show text , image or an video.

[rangana]

In a nutshell, this should work:


<span onclick="this.style.display='none';document.getElementById('container').style.display=''" style="cursor:pointer;">Click me to show element</span>
<div id="container" style="display:none;"><br />This is the text</div>


However, things varies as to what you wanted get done really, but the code above should demonstrate how to alter an element's display through JS.

[devogirl]

I can think of two ways of doing this. One without the use of jQuery, and another using jQuery, which is my preference.

Without jQuery:



<div onclick = "this.style.display='none';document.getElementById('content_container').style.display='block'">My super button</div>
<div id = "content_container" style = "display:none">
My content that was hidden but its visible now that I clicked on my button.
Insert your video, image, etc here.
</div>


Of course you can just define your CSS for both fields in an external css file. (The preferred method), but this gives you an idea.

You can do this in a much simpler way with jQuery. All you have to do is add jQuery javascript package file. And then rewrite the code above as:



<div onclick = "$(this).toggle(); $('content_container').show()">My super button</div>
<div id = "content_container" style = "display:none">
My content that was hidden but its visible now that I clicked on my button.
Insert your video, image, etc here.
</div>


You added a new message after I started writing this. If you want everything to happen within the same DIV block, then you can nest the divs:



<div class = "GlobalSuperContainer">
<input type = "button" value = "My Button" onclick = "$(this).toggle(); $('content_container').show()">
<div id = "content_container" style = "display:none">
My content that was hidden but its visible now that I clicked on my button.
Insert your video, image, etc here.
</div>
</div>


I strongly suggest you start using jQuery for these types of things. You will not regret you started learning it now.

A more proper way would be probably to use jQuery's command hide(), instead of toggle(), but it's essentially the same thing.