CODEWITHSUNDEEP
javascriptjqueryhtml
al123
al123

Reputation: 569

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:

http://jsfiddle.net/8a7GL/152/

Upvotes: 0

Views: 1532

Answers (4)

Fonzy
Fonzy

Reputation: 691

Hide / Show one Banner at a time:

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

http://jsfiddle.net/8a7GL/152/

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

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

UPDATE:

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>

CSS:

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

});

DEMO: http://jsfiddle.net/8a7GL/174/

Upvotes: 1

CSK
CSK

Reputation: 777

try this:

if ($('#Banner2Home').is(":visible")) {

    $('#Banner2Home').hide();

} else {

    $('#Banner2Home').show();

}

return false;

Upvotes: 0

Piotrek
Piotrek

Reputation: 11211

http://api.jquery.com/toggle/

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

In HTML:

<button onclick="change()" />

Upvotes: 0

Yousef_Shamshoum
Yousef_Shamshoum

Reputation: 822

You can use the show/hide function provided by jquery and even give it an animation.

Just give the banners a selector and use the .click event.

Upvotes: 1

Related Questions