1

I am using a button to toggle the state of images from "hidden" to "show". I can get the images to show, but when they do, they appear in a verticl alignment. I wish for the images to show themselves horizontally instead of vertically.

my markup is as follows

<div class="left ch-ad-profile-left eleven columns">
    <button>
        <div class="boxes-212x100">
            <h4 class="blue">Parked Ads</h4>
            <div class="status-l">
                <p>Updates</p>
                <center><span>18</span></center>
            </div>
            <div class="status-r">
                <p>Removed</p>
                <center><span>3</span></center>
            </div>
            <div class="clearfix"></div>
        </div>
    </button>
    <script>
        $("button").click(function () {
            $(".boxes-112x100-1").slideToggle("slow");
        });
    </script>

    <!--end class=boxes-212x100-->
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="clearfix"></div>
</div>

So how can I tell toggle to make the images appear in a horizontal line instead of a verticle line?

CAMOBAP
  • 5,523
  • 8
  • 58
  • 93
user1090227
  • 1,551
  • 2
  • 10
  • 3

2 Answers2

0

You can use jQueryUI for this.

http://docs.jquery.com/UI/Effects/Slide

Nw167
  • 169
  • 5
0

I am afraid you do not have any inbuilt methods for that .. You need to use the animate function to that , or you need to extend the jQuery methods to get that functionality..

You may use jQueryUi or Cycle Plugin to achieve this

Also have a look at this

jQuery slide left and show

Community
  • 1
  • 1
Sushanth --
  • 55,259
  • 9
  • 66
  • 105