CODEWITHSUNDEEP
jqueryslidetoggle
Jonny Haynes
Jonny Haynes

Reputation: 3186

jQuery click function and slideToggle

My problem is that when a user clicks on the <h4> it opens the hidden <div> below it. That's great - works as expected. However when a user clicks back on the same <h4> - it closes the <div> and reopens it instantly.

I need the <div> to stay closed. I also need the remaining functionality to stay in place.

This is my jQuery:

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

EDIT This is my HTML:

<div id="winners-table">
        <h3>...</h3>
        <ul>
            <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
        </ul>
</div>

Upvotes: 0

Views: 2601

Answers (2)

munch
munch

Reputation: 6321

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');
            }

       });
});

Upvotes: 2

Nikki Erwin Ramirez
Nikki Erwin Ramirez

Reputation: 9924

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.

Upvotes: 2

Related Questions