当包裹在2个容器中时，toogle无法正常工作

Question

am trying to make a slider, and make the text and image slide when i click on an arrow(img)

 <div class="col span_12_of_12 bannerHomeHeight">   
     <div class="homeImage1" id="homeBannerContainer1" style="display: block">
        <div class="homeImage">
            <h4>HIV</h4>
            <img src="/images/banner-hiv-icons.png" alt=""/>
        </div>

         <div class="homeBanner">
            <h3>HIV support materials for healthcare professionals, paitent groups and paitents</h3>
             <div class="homeArrow">
                <img src="/images/arrow.png" alt=""/>
            </div>
        </div>
    </div>
</div>


<div class="homeImage1" id="homeBannerContainer2" style="display: none">
    <div class="homeImage">
        <h4>HCV</h4>
        <img src="/images/banner-hep-icons.png" alt=""/>
    </div>

    <div class="homeBanner">
        <h3>HCV support materials for healthcare professionals, paitent groups and paitents</h3>
        <div class="homeArrow">
            <img src="/images/arrow.png" alt=""/>
        </div>
    </div>
</div>

My J query is:

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

    });
    });

homeImage1 is the container which i want sliding but the 2nd one goes to the bottom rather than coming in from the side.

live: thenandnow.anytimeafter9.co.uk

Answer 1

The problem is your bannerHomeHeight for the first slider frame is still there taking up space when you toggle its child homeImage1 's display.

Try toggle bannerHomeHeight instead:

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

    });
});

[EDIT]

The problem with this is that when both elements are side by side during animation they take up > 100% and one is forced underneath. To solve this we can give .bannerHomeHeight 2 style changes (max height and width) so it is as follows:

.bannerHomeHeight {
    margin-top: -16px;
    min-height: 170px;
    background-color: #54565b;
    max-height: 170px;
    width: 98%;
}

This way the height isn't seen to change to fit the content as it animates, and being 98% width is just enough to prevent the combination of the 2 becoming over 100% (I don't know whats causing this exactly, I guess something to do with padding/margins ?)