fadeIn & fadeOut div content onClick image button

**davelf** · 05-19-2012, 11:59 AM

i want to show div content onClick, image button. How to make this?

I find this demo, 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...

**vwphillips** · 05-19-2012, 03:20 PM

image buttons should only be used to submit a form but

Code:

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

#sometext {
	width: 150px;
	height: 150px;
	padding: 10px;
	border:1px solid black;
	background-color: #FFEE88;
}
</STYLE>
</HEAD>
<BODY>
<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)"/>
<br/><br/>
<div id="sometext">
    This text will Fade In and Out.
</div>


</BODY>
<SCRIPT>
function fade(div_id, button) {

	if(button.value == 'FadeOut') {
		$('#'+div_id).fadeOut('slow');
		button.value = 'FadeIn';
	}
	else {
		$('#'+div_id).fadeIn('slow');
		button.value = 'FadeOut';
	}
}

$('#sometext').fadeOut(2);

</SCRIPT>
</HTML>

**davelf** · 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"

Thread: fadeIn & fadeOut div content onClick image button

Thread Tools

Search Thread

fadeIn & fadeOut div content onClick image button

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions