Slidedown element and slideUp others

Question

I know there're a lot of subject like this, but I didn't find an correct answer.

When the document is loaded, I would like all my blocks closed (slideUp).

When the user click on a block, the text slide down siblings others open blocks (so it closed others blocks if opened).

I have this, but it's working with only two blocks :

<div class="col-xs-12 wrap-blocks-concours">
            <div class="col-xs-12 blocks-concours">

                <div class="col-xs-8">
                    <img src="#" alt="Nicolas et Mathieu">
                </div>

                <div class="bandeau-nom-concours">
                    <h3 class="uppercase">Nicolas et Mathieu</h3>
                </div>

                <div class="col-xs-4 text-block selected">
                    <h5 class="uppercase">Content</h5>
                </div>
            </div>

            <div class="col-xs-12 text-slide">
                <h3>Content</h3>
            </div>
        </div>

And my Jquery :

(function($) {
        $(document).ready(function() {
            $('.blocks-concours').click(function() {
                var currentContent = $(this).siblings('.text-slide');
                $('.text-slide').not(currentContent).slideUp();
                currentContent.slideToggle().sibling($('.text-slide'));
            });
        });
    })(jQuery);

Moreover, I have a display: none on my text-slide

So how could I do this the more simply as possible ?

Possible duplicate of [How to Use slideDown (or show) function on a table row?](http://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row) — Emilien, Apr 09 '17 at 16:11
Really not clear what expected behavior is....be more specific — charlietfl, Apr 09 '17 at 16:42

Neil · Answer 1 · 2017-04-09T16:41:35.013

You were so close! You used sibling instead of siblings once. I just removed that part as it wasn't doing anything.

$(document).ready(function() {
    $('.blocks-concours').click(function() {
        var currentContent = $(this).siblings('.text-slide');
        $('.text-slide').not(currentContent).slideUp();
        currentContent.slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 wrap-blocks-concours">
            <div class="col-xs-12 blocks-concours">

                <div class="col-xs-8">
                    <img src="#" alt="Nicolas et Mathieu">
                </div>

                <div class="bandeau-nom-concours">
                    <h3 class="uppercase">Nicolas et Mathieu</h3>
                </div>

                <div class="col-xs-4 text-block selected">
                    <h5 class="uppercase">Content</h5>
                </div>
            </div>

            <div class="col-xs-12 text-slide">
                <h3>Content</h3>
            </div>
        </div>

`siblings()` does nothing in `currentContent.slideToggle().siblings($('.text-slide'));` .... line doesn't make sense — charlietfl, Apr 09 '17 at 16:40

Slidedown element and slideUp others

1 Answers1