ansaurus

Question

jQuery click function and slideToggle problem, help please?

Answer 1

+2 A:

After trying it with your edited question, i got it to working using this js:

$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            $('div#winners-table h4.closed').removeClass('closed');
            $('div#winners-table h4.open').each(function(){
                $(this).attr('class', 'closed').siblings('div').slideUp();
            });

            if(!$(this).hasClass('open') && !$(this).hasClass('closed')){
              $(this).addClass('open');
              $(this).siblings('div').slideDown();
            }else{
               $(this).removeClass('open');
            }

       });
});

munch 2010-01-20 09:54:05

This doesn't work - well that's not true actually - it does mean that the `<div>` slides back up when the `<h4>` is clicked.However, removing the line `$(this).siblings('div').slideUp();` stops the other `<div>`s from closing - only one needs to be visible at a time. Also, removing the each loops - leaves the class `open` active when clicking on the `<h4>`

Jonny Haynes 2010-01-20 10:10:53

It would probably be more helpful if you included your HTML markup as well. Your question implies it's a single `<div>` within the `<h4>`

munch 2010-01-20 10:20:23

I've added ion the HTML, apologies.

Jonny Haynes 2010-01-20 10:28:22

Something funky's going on with the way you're classes are being called. Once the 'closed' class was added, it was never being removed, and toggleClass was also active counter-intuitively, so I just went old school. Hope it works the way you expect it to.

munch 2010-01-20 11:28:35

Looks like this is the way to go (using `addClass`/`removeClass`). `attr('class', 'closed')` seems to act like `addClass`.

Nikki Erwin Ramirez 2010-01-20 11:41:46

Might be old school but works exactly as expected. Thanks for your help Munch.

Jonny Haynes 2010-01-20 11:47:12

Answer 2

+2 A:

Your problem is because, after closing all h4.open, you still slideToggle() the clicked h4.

$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            var clicked = this;
            $('div#winners-table h4.open').each(function() {
                $(this).attr('class', 'closed');
                if (clicked != this) {
                    $(this).siblings('div').slideUp();
                    }
                });
            $(this).toggleClass('open');
            $(this).siblings('div').slideToggle();
            });
        });

^ I added a check where the clicked h4 wouldn't slideUp(), so the slideToggle() would do its job as expected.

EDIT

Here's my entire HTML file:

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            var clicked = this;
            $('div#winners-table h4.open').each(function() {
                $(this).attr('class', 'closed');
                if (clicked != this) {
                    $(this).siblings('div').slideUp();
                    }
                });
            $(this).toggleClass('open');
            $(this).siblings('div').slideToggle();
            });
        });
</script>
</head>
<body>
<div id="winners-table">
        <h3>h3</h3>
        <ul>
            <li>
                <h4>H4</h4>
                <div>div1</div>
            </li><!-- ENDS -->
                    <li>
                <h4>h4 2</h4>
                <div>div 2</div>
            </li><!-- ENDS -->
                    <li>
                <h4>h4 3</h4>
                <div>div 3</div>
            </li><!-- ENDS -->
                    <li>
                <h4>h4 4</h4>
                <div>div 4</div>
            </li><!-- ENDS -->
        </ul>
</div>
</body>
</html>

As you can see, I copied your HTML and only replaced the ellipses. Tested on Firefox 3.5, Chrome 4 (dev channel), Opera 10, IE6 (via IEs4Linux) on Ubuntu.

Nikki Erwin Ramirez 2010-01-20 10:55:08

Sorry, this doesn't work - it requires the user to click twice on the `<h4>`. It also doesn't close the previous `<div>` when clicking on another `<h4>`.

Jonny Haynes 2010-01-20 11:06:08

Then you might have omitted something essential from your HTML. "It works on my machine." :p Maybe more details on what you have on your web page? :)

Nikki Erwin Ramirez 2010-01-20 11:16:07

Right. Safari Mac: Requires user to click twice on the `<h4>`. It also doesn't close the previous `<div>` when clicking on another `<h4>`. FF Mac, Opera Mac, IE6 WinXP, IE7 WinXP: Doesn't remove the class 'open' off of the `<h4>`.

Jonny Haynes 2010-01-20 11:27:18

My code is exactly the same and it's very buggy cross browser/os

Jonny Haynes 2010-01-20 11:46:11

ansaurus

tags:

views:

answers:

jQuery click function and slideToggle problem, help please?

related questions