Question

Thanks in advance for any-help with this, I’ll try and explain it well.

I have a container of 1000px width and 220px height, in this I will have three columns 220px in height but with different widths (77px, 200px and 300px). When you click one div it will open to a fixed size (the same for each, say 400px) and the others which are not clicked will shrink back to their original sizes (77px, 200px and 300px). Like an accordian with different widths..

My jquery is getting there but not quite, I know how to create an Event on click, I know from there I need to shrink everything but the one I clicked back to their orignal size. I finish but making the one clicked expand to the size it needs to be.

jsfiddle here!

    $(document).ready(function(){
 // Your code here
 $('.section').click(function() {
  $('.section').not(this).animate({width:"77px"},400);
  //alert('clicked!');
  $(this).animate({width:"400px"},400);
 });
});

<div id="pictureNavContainer">

 <div class="section pictureSectionOne" id="1"></div>
 <div class="section pictureSectionTwo" id="2"></div>
 <div class="section pictureSectionThree" id="3"></div>

</div>

<style>
#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;}
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;}
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;}
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;}
</style>

I figured a kind of solution:

<script>
$(document).ready(function(){
    // Your code here
    $('.section').click(function() {



        $('#1').animate({width:"50px"},400);
        $('#2').animate({width:"100px"},400);
        $('#3').animate({width:"200px"},400);

        //alert('clicked!');
        $(this).animate({width:"400px"},400);
    });
});
</script>

But the code isnt very good.. but it works

This:

$(function(){

    var $sections = $('.section');
    var orgWidth = [];

    var animate = function() {
        var $this = $(this);
        $sections.not($this).each(function(){
            var $section = $(this),
                org = orgWidth[$section.index()];
            $section.animate({
                width: org
            }, 400);
        });
        $this.animate({
            width: 400
        }, 400);
    };

    $sections.each(function(){
        var $this = $(this);
        orgWidth.push($this.width());
        $this.click(animate);  
    });
});

Answer 1

Ok, I think I got it to work. Like this?

However, this doesn’t set the clicked element to a fixed size but to the size that is left. If you resize the clicked element to a fixed size the three columns will either become wider or thinner then 1000px, is that really what you want?

Here is an updated example. This does exactly what you asked for, but I’m not sure that this is what you want.

Code with inline comments:

$(function(){
    // we cache the result set from the selector so we can
    // reuse them without having to query the DOM again
    var $sections = $('.section');

    // placeholder array for original widths
    var orgWidth = [];

    // handler function to take care of the animations
    var animate = function() {
        var $this = $(this);
        // iterate through all but current element
        $sections.not($this).each(function(){
            // create jQuery object and fetch original width
            var $section = $(this),
                org = orgWidth[$section.index()];
            // animate current element
            $section.animate({
                width: org
            }, 400);
        });
        // animate current element
        $this.animate({
            width: 400
        }, 400);
    };

    // let's iterate through each of the elements
    $sections.each(function(){
        // create jQuery object for current element
        var $this = $(this);
        // push the elements width into the placeholder
        orgWidth.push($this.width());
        // bind the handler to the click event
        $this.click(animate);  
    });
});