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?

you should post a jsfiddle.net with the relevant part of code so that we could help — JMax
– JMax, Commented Aug 18, 2011 at 10:05
It will not fix your bug, but to begin, you have to rewrite your HTML code : <div> elements ar not allowed in <ul> if it are not in a <li>, <link> are not closed and missing type='text/javascript' in <scrip> tag. Wrong HTML code can make unpredictable javascript behavior — Elorfin
– Elorfin, Commented Aug 18, 2011 at 10:15
thanks now i get a jsfiddle.net page:jsfiddle.net/dassio/CLrMx/9 and i put the p inside the li element, is that validate? — danny
– danny, Commented Aug 18, 2011 at 11:07

RJD22 · Accepted Answer · 2011-08-18 11:48:45Z

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.

answered Aug 18, 2011 at 11:48

RJD22

10.4k3 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danny Over a year ago

thanks any way . i found the problem: it is because i add the classname name to the parent div, and when the event bubble up the 'toggle' method is called. i am not allowed to post my answer right now, later i will get more detail description. thanks for your time!

nhahtdh · Accepted Answer · 2012-10-04 02:39:24Z

0

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.

edited Oct 4, 2012 at 2:39

nhahtdh

56.9k15 gold badges131 silver badges164 bronze badges

answered Aug 20, 2011 at 4:56

danny

1,1652 gold badges15 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery toggle method issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related