jQuery toggle method issue

Question

When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.

Here is the test page: http://jsfiddle.net/dassio/CLrMx/9

I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?

Answer 1

This should do the job: http://jsfiddle.net/CLrMx/15/

Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.

Answer 2

I found the problem:

<div id="config" class='name ui-widget-content ui-corner-all'> 
    <button id="details">show details</button> 
</div> 

I add the name class name to the parent div around the button, and when the event bubble up to the parent div , the following code:

$(".name" ).click(function() {
    var clicked = $(this);
    var suggestion = clicked.next();
    suggestion.toggle("fold",200);
    return false;
});

was called and toggle off the <h3> element which is the next element of the parent div .