jQuery: how to "declick" a open slideToggle div?

Is it possible to "declick" an active div that has been opened with slideToggle?

This function opens multiple text divs independently from each other, but the open div's click(function() is still clickabl开发者_JAVA百科e, and so the div will bounce closed and then open again. It's mostly a user experience; I'd like users to be unable to click an already opened div.

jsfiddle: http://jsfiddle.net/auUxk/12/

$(".entry-content").hide();
$(".entry-title").click(function() {
    $(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); });

HTML:

<div class="entry-post">

    <h2 class="entry-title">Post Title 1</h2>

       <div class="entry-content">Lorem Ipsum Lorem Ipsum

    </div></div>

<div class="entry-post">

       <h2 class="entry-title">Post Title 2</h2>

       <div class="entry-content">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum 

    </div></div>

---

I think this is what you want. It seems most people didn't notice that you want to keep only one open div at a time.

http://jsfiddle.net/entropo/WnpGv/

jQuery(document).ready(function($) {
    $(".entry-title").click(function() {
        $this = $(this);
        var $content = $this.next(".entry-content");
        if (! $content.is(":visible")) {
            $(".entry-content:visible").slideToggle(100);
            $content.slideToggle(500);
        }
    });
});

Edit:
This UI pattern is called an accordion. There are also lots of plugins which achieve this in more dramatic/complicated ways.

Also, jQuery UI has an accordion in their API. Keep in mind that the accordion API is being revamped for 1.9.

---

"I'd like users to be unable to click an already opened div."

This will work: http://jsfiddle.net/xixionia/9P6My/

<div>
    <h2 class="entry-title">Post Title 1</h2>
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div>
</div>

<div>
    <h2 class="entry-title">Post Title 1</h2>
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div>
</div>

and

$(".entry-title").click(function() {
    $(this)
        .next('.entry-content:not(:visible)')
        .slideToggle(500);
});

And the CSS:

.entry-content
{
    display: none;
}

Or, you can always skip the css and use hide() on all of your entry-content classed elements. :)

This will toggle slide the first following element with the ".entry-content" class that are not visible, and will not slide them closed.

If you would like to actually unbind yourself from the click event entirely, you could use undbind('click')

$(".entry-title").bind('click', function() {
    $(this)
        .unbind('click', arguments.callee)
        .next('.entry-content')
        .slideToggle(500);
});

This would be the most savvy approach, and will not unbind your other functions which may be bound to the click event.

Or, you could unbind using event namespaces:

$(".entry-title").bind('click.slideopen', function() { // bind a click event with the slideopen namespace
    $(this)
        .unbind('.slideopen') // unbind all events in the slideopen namespace
        .next('.entry-content')
        .slideToggle(500);
});

You can see an example of this here: http://jsfiddle.net/xixionia/9P6My/6/

---

If you want to click on close, you can do this:

$(".entry-content").hide();
$(".entry-title").click(function() {
    $(".entry-content").hide();
    $(this).parent().children(".entry-content:visible").slideToggle(500); 
});

This will close all divs, but not open it again. If you want to keep it open:

$(".entry-content").hide();
$(".entry-title").click(function() {
    var d = $(this).next();
    if (!d.is(":visible")) {
        $(".entry-content").hide();
        d.slideToggle(500); 
    }
});