How to close a 'toggle' from another function in jQuery

If div.msg_head is clicked then .msg_row slides down using animate which this is working in my example. My problem is that I am trying to write a function that will close all message panes before sliding down a second message that was clicked.

Here is an example:

ht开发者_开发百科tp://jsfiddle.net/rZR5y/2/

---

I understand that you're trying to slideUp all other panes before sliding down a new one. This way only one pane will stay open.

Easy enough: Don't use toggle.

var $allMail = $(".msg_head");
$allMail.click(function() {
    var $this = $(this);
    if( $this.hasClass('opened') ) {
        $this.removeClass('opened').slideUp();
    } else {
        // assuming 'body' is the class of the div you want to show/hide
        $allMail.removeClass('opened').find('.body').slideUp();
        $this.addClass('opened').find('.body').slideDown();
    }
);

Hope this is what you're looking for.
Cheers!

---

You can combine used of id and class atrribute to achive something like : http://jsfiddle.net/toopay/pUYpU/

---

WORKING DEMO

• leave opened all messages
• calculate each message area height
• write heights to .data() for each message area
• close areas
• do the magic on click!

jQuery:

    $('.m_short_msg').each(function(e) {
        var h = $(this).height();
        $(this).data('height', h);
    });

    $('.m_short_msg').css({height: '19px'});

    $('.msg_row').click(function() {
        var d = $(this).find('.m_short_msg');
        check = (d.height() === d.data('height')) ?
                d.animate({height: '19px'}) :
                ( $('.m_short_msg').animate({height: '19px'}) ) ( d.animate({height: d.data('height')}) ) ;
    });

EDIT Using .animate() you can add many animation effects to your elements from the jQuery UI.

With this script you can even CLOSE an opened message by clicking on it! So I find this one more 'user friendly'.

Another '+' of this script is that actually allow the user to see the first line of the message itself... for reference. And that is also UserFriendly™

---

If you have plans to have a 'message title' instead of showing the first line of the message you can do this:

DEMO 2

$('.msg_row').click(function() {
    var d = $(this).find('.msg');
    check = (d.is(':visible')) ? d.slideUp() : ($('.msg').slideUp())(d.slideDown());
});

It also checks for opened messages and has the ability to CLOSE the opened one if clicked again.

---

why don't you use accordin. I think it suitable for you and its very nice:

http://jqueryui.com/demos/accordion/