CODEWITHSUNDEEP
jqueryhtmlcss
Evolutio
Evolutio

Reputation: 974

jQuery slideDown menu won't work

I have the same trouble that I have last week.

My html code looks like this:

<article class="tickets">
                <div class="grid_12 left">
                    <div class="header">
                        <i class="icon-pushpin"></i>
                        Neue Tickets
                        <div class="count right"><span>6</span></div>
                    </div>
                    <div class="messages">
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                    </div>

                    <div class="header">
                        <i class="icon-pushpin"></i>
                        Neue Tickets
                        <div class="count right"><span>6</span></div>
                    </div>
                    <div class="messages">
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                    </div>
                </div>
            </article>

and the jQuery part:

$('.header').click(function(e) {
    $(this).siblings('.messages').slideDown(500);
    $(this).next().slideUp('normal');
    e.preventDefault();
});

The first menu slide's down and up and the second menu down. I would slideDown the first menu and after a click on the "header" a slideUp. When the first menu is open and you I click on the second menu the first menu should slideUp and the second down. What is wrong with my Code?

Upvotes: 0

Views: 190

Answers (2)

Bill
Bill

Reputation: 3517

I think this is what you want:

$(this).siblings('.messages').not($(this).next('.messages')).slideUp(500);
$(this).next('.messages').slideToggle('normal');

First, I am sliding up all the .message's (EXCEPT $(this).next('.messages')), then I am toggling $(this).next('.messages'). I have used toggle so that you can close as well as open it.

I have updated your jsFiddle

Source(s)

jQuery API - .not()

Upvotes: 2

joao
joao

Reputation: 342

$('.messages').hide();



clickme=function(){

$('.header').click(function(e) {

    $(this).siblings('.messages').slideDown(500);
    $(this).off('click');
    $(this).click(function(){
        $(this).siblings('.messages').slideUp('normal');
    })
        $(this).on('click',clickme);    
});
}
clickme();

try this!

Upvotes: 0

Related Questions