Jquery slide hide-show div with an image


I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.

<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>

i want homeArrow to be the click button to show next banner

but not sure how to connect to jquery...

This is JS fiddle:

<a href="http://jsfiddle.net/8a7GL/152/" rel="nofollow">http://jsfiddle.net/8a7GL/152/</a>


Hide / Show one Banner at a time:

$(".homeArrow").on('click',function () { $(".homeImage").slideToggle(); });

<a href="http://jsfiddle.net/8a7GL/152/" rel="nofollow">http://jsfiddle.net/8a7GL/152/</a>

Sliding from left to right can be achieved by a little more code in jQuery see: <a href="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/" rel="nofollow">http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/</a>

You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.


Here is the left / right slidy. HTML:

<div class="homeBannerContainer" style="display: block"> <div id="a1" class="homeImage"> <h4>Banner 1</h4> <img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" /> <div class="homeBanner"> <h3>My banner</h3> </div> </div> <div id="a2" class="homeImage" style="display: none"> <h4>Banner 2</h4> <img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" /> <div class="homeBanner" style="display: none"> <h3>My banner 2</h3> </div> </div> <div class="homeArrow"> <img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" /> </div>


$(".homeArrow").on('click', function () { $('.homeImage').animate({ width: 'toggle' }); });

DEMO: <a href="http://jsfiddle.net/8a7GL/174/" rel="nofollow">http://jsfiddle.net/8a7GL/174/</a>


You can use the <a href="http://api.jquery.com/show/" rel="nofollow">show/hide</a> function provided by jquery and even give it an animation.

Just give the banners a selector and use the <a href="http://api.jquery.com/click/" rel="nofollow">.click</a> event.


<a href="http://api.jquery.com/toggle/" rel="nofollow">http://api.jquery.com/toggle/</a>

function change(){ $("#firstbanner").toggle(); $("#secondbanner").toggle(); }


<button onclick="change()" />


try this:

if ($('#Banner2Home').is(":visible")) { $('#Banner2Home').hide(); } else { $('#Banner2Home').show(); } return false;


  • How to change the size of menu item icon in NavigationView?
  • Draw portion of image on Canvas
  • Resize images and save output
  • window.onbeforeunload in javascript
  • Jquery resizable reposition handle after scroll
  • IE11 textarea loses focus if another textarea is disabled
  • HighCharts - Show tooltip on column where value is 0 or null
  • File loader changed image file name but not the file name in HTML file
  • cell spacing in div table
  • apply a javascript function to draggable copy
  • passing a default argument to a browserify module
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Jquery popup on mouse over of calendar control
  • Ajax calls do not work in IE unless you fiddle with security settings
  • Detect when Facebook like button is clicked
  • jQuery .attr() and value
  • How to clear text inside text field when radio button is select
  • Get data from AJAX - How to
  • Email format validation in mvc3 view
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • req.body is undefined - nodejs
  • Cross-Platform Protobuf Serialization
  • Modifying destination and filename of gulp-svg-sprite
  • Validaiting emails with Net.Mail MailAddress
  • Join two tables and save into third-sql
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Do I've to free mysql result after storing it?
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy