View Full Version : fadeIn & fadeOut div content onClick image button

05-19-2012, 11:59 AM
i want to show div content onClick, image button. How to make this?:D
I find this demo (http://viralpatel.net/blogs/demo/jquery-fade-in-fade-out-div/), but the demo already show the content first. and they use button and value instead of image. How to edit this.

Thank you so much...

05-19-2012, 03:20 PM
image buttons should only be used to submit a form but

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>FadeIn FadeOut Div using jQuery - DEMO</TITLE>
body, input{
font-family: Calibri, Arial;

#sometext {
width: 150px;
height: 150px;
padding: 10px;
border:1px solid black;
background-color: #FFEE88;
<H2>FadeIn FadeOut Div using jQuery - Demo</H2>
<p>Click here to view the Tutorial: <a href="http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html">FadeIn FadeOut Div using jQuery</a></p>

<input type="image" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" value="FadeIn" onclick="fade('sometext', this)"/>
<div id="sometext">
This text will Fade In and Out.

function fade(div_id, button) {

if(button.value == 'FadeOut') {
button.value = 'FadeIn';
else {
button.value = 'FadeOut';



05-20-2012, 04:47 AM
Thank you so much Vic.

I have another problem, here. How to change the image?
so for example i have this button "show" and after the div content appear, the button change to "hide"