StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery Slide Toggle Not Working - Resolved
text
Body
copied!<p>On the first click, it works as expected:</p> <ol> <li>the class is changed </li> <li>and the html content is changed from 'Show...' to 'Close...'</li> <li>the content area is expanded with the slideDown effect,</li> </ol> <p>Good so far.</p> <p>On the second click, ...</p> <ol> <li>the class changes</li> <li>the html content is changed from 'Close...' to 'Show...'</li> <li>The content area does NOT go away as expected.</li> </ol> <p>On the third click, ...</p> <ol> <li>the class is changed</li> <li>the html content is changed </li> <li>the already-shown content is re-shown with the slidedown effect.</li> </ol> <p>So everything is working except for the 2nd click when the content is supposed to be hidden again.</p> <p>Here's the jQuery:</p> <p>-</p> <pre><code>$('.open_user_urls').live('click', function() { $('#user_urls').slideDown('slow'); $(this).addClass('close_user_urls'); $(this).removeClass('open_user_urls'); $(this).html('Close Search History'); return false; }); $('.close_user_urls').live('click', function() { $('#user_urls').slideUp('slow'); $(this).addClass('open_user_urls'); $(this).removeClass('close_user_urls'); $(this).html('Show Search History'); return false; }); </code></pre> <p>Here's the HTML it's acting on:</p> <pre><code><h3 class='open_user_urls'>Show Search History</h3> <div id='user_urls'> // an OL tag with content </div> </code></pre> <p>And the only applicable CSS:</p> <pre><code>#user_urls { display: none; } </code></pre> <p>EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...</p> <p>EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.</p> <p>Edit 3 - Found the source of the problem.</p> <p>Inside the #user_urls div I have an series of OLs with the following css:</p> <pre><code>.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;} </code></pre> <p>Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.</p> <p>Removing the float: left; on these OL tags causes the problem to go away.</p> <p>So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?</p> <p>EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload