Горизонтальная гармошка для изображений + кнопка открытия EDITED

Question

Я обновил свою проблему! Итак, вот скрипка: http://jsfiddle.net/kozola/8M6wS/

Мой код:

<style>
#container {
margin-top: 200px;
position: relative; /* needed for absolutely positioning #a and #c */
padding: 0 10px 0 100px; /* will offset for width of #a and #c; and center #b */
border: gray 1px dotted; /* just for the show */
float: left; /* To dynamicaly change width according to children */
height: 100px;
}

#container div { height: 100px; }

#tab1 {
position: absolute;
top: 0;
width: 100px;
background: gray;
left: 0;
}

#fin {
position: absolute;
top: 0;
width:10px;
background: #eee;
right: 0;
}

#content {
white-space: nowrap;
}

#content div { display: inline-block; }
#content img { height: 100px; }

.description { position: absolute; border: 1px solid red; width: 200px; height: 100px; }
</style>



<div id="container">
<div id="tab1">fixed width content</div>
<div id="content">
    <div><a href="#" id="first"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="first">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />    <img src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>
    </div>
    <div><a href="#" id="second"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="second">
        <img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>        
    </div>
    <div><a href="#" id="third"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="third">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />
    </div>
</div>
<div id="fin">fin</div>
</div>


<script>

$(document).ready(function(){
$(".first").hide();
$("#first").show();

$("#first").click(function(){
    $(".first").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".second").hide();
$("#second").show();

$("#second").click(function(){
    $(".second").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".third").hide();
$("#third").show();

$("#third").click(function(){
    $(".third").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

</script>

Я пытаюсь сделать следующее: 1. Мне нужно открывать только одну вкладку за раз! Итак, если я открою одну вкладку, другие закроются. Я понимаю, что мог бы написать закрывающую функцию для каждого div, который не открыт одновременно, но у меня будет ~100 div, так что это не сработает. 2. Я не могу понять, почему средняя часть не гладкая вообще! Может быть, у вас есть идеи?

Большое спасибо всем вам!

Answer 1

Попробуйте использовать этот пример

                $(document).ready(function () {

        $(".title").click(function () {

            $(".content").slideUp("fast");

            $(this).find('.expand').removeClass('collapse');
            if ($(this).next().is(":hidden") == true )
            {
                $('.expand').removeClass('collapse');
                $(this).next().slideDown("normal")
                $(this).find('.expand').addClass('collapse');
            }
        }); 
    });