CODEWITHSUNDEEP
jqueryfunctionparent-childhtml
Textfield
Textfield

Reputation: 11

Hiding and showing nested divs?

I've been struggling with some minor html / jquery logic.

I got Divs called "work" and inside them, there is a gallery.

<div class="work">
        <span class="workTitle">A Work</span>
        <div class="gallery" style="" >
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
        </div>
    </div>

When i click on a work, their heights and margins change in jquery by toggling the class which is:

work.click(function() {

    work.removeClass("on");
    $(this).addClass("on");
});

But the problem is, when i try to add the gallery divs, in my 'work' div, i want them to be hidden and their 'closed' heights wont get distorted.

I also like to close the "on" class again when i click on the 'already opened' 'work' item. but ToggleClass makes every work open by itself, not one by one closing one another.

And the last question is, how do i animate height? I got a specific value, but it just animates the margin parameter.

Thanks in advance!

Metin.

Also why it doesn't work any ideas?

$(".work").click(function () {
    openWork($(this));
});


function openWork($) {
    $.animate({ marginLeft: openMargin }, 500, 'swing', function() {
        // completion handler
        $.animate({ height: workHeight }, 500, function () {
            closeWorks($(".work").not($(this)));
        });
    });
}

function closeWorks($) {
    $.animate({ height: '100%' }, 500, 'swing', function() {
        $.animate({ marginLeft: closedMargin }, 500, 'swing', function() {});
});

I tried to divide your jq_array idea into functions. openWorks(); seems fine but closeWorks(); just does not work...

Upvotes: 0

Views: 206

Answers (1)

tompave
tompave

Reputation: 12427

Mmmm... I would split your question, as there are too many different parts. Anyway, my bit:

I also like to close the "on" class again when i click on the 'already opened' 'work' item. but ToggleClass makes every work open by itself, not one by one closing one another.

$(".work").click(function() {
    jq_array = $(".work").not($(this));   //all the others
    jq_array.removeClass("on");           //close any other, if open
    $(this).toggleClass("on");            //open or close the clicked one
});

Then:

And the last question is, how do i animate height? I got a specific value, but it just animates the margin parameter.

var height_sttring = "200px";   // craft the height string

$('#selector').animate(
    { height: height_sttring }, //this is an hash, can contain more keys
    1000,                       // how many milliseconds
    function() {
    // completion handler
    }
);

But the problem is, when i try to add the gallery divs, in my 'work' div, i want them to be hidden and their 'closed' heights wont get distorted.

Can't understand what you mean, I'm sorry..
EDIT Try:

.work {
    position: relative;
}
.work > .gallery {
    display: none;
    position: absolute;     // this way it will no more occupy "physical" space in the DOM.
    bottom: 10px;           // of course you can adjust this.
}
.work.on > .gallery {
    display: block;
}

This should work, although you should make some experiments to fit it into your animation timing. I would first expand the parent div.work, then fade in the inner div.gallery.

Upvotes: 1

Related Questions