При открытии Toggle закрытие других открытыхToggle?

Question

[zhen_safronov]

Добрый день. Имеется код:
При нажатии появляется блок pop-block с ID(они разные)
Как сделать так чтобы, при открытии 1, закрывались все открытые.

<script>
            $("#spaklevka").click(function () {
                $("#shpakl").slideToggle(500);
            });
        </script>

<div class="price-block-first" id="spaklevka">
                <div class="price-block-sr">
                    <span>Шпаклевка</span>
                    <div class="price-block-img"><img src="images/shpaklevka.jpg" alt="" /></div>
                </div>
            </div>
            <div class="pop-block hr" id="shpakl">
                <div class="title-block">Шпаклевка</div>
                <div class="price-block-first small obraz">
                    <div class="price-block-sr">
                        <span>Шпатлёвка 4CR<br></span>
                        <img src="images/4sr.jpg" alt="" />
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr">
                        <span> АРР</span>
                        <div class="price-block-img"><img src="images/app.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> ARS<br></span>
                        <div class="price-block-img"><img src="images/ars.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> BODY</span>
                        <div class="price-block-img"><img src="images/body.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> Brulex<br></span>
                        <div class="price-block-img"><img src="images/brulex.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> CAR FIT<br></span>
                        <div class="price-block-img"><img src="images/cat.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> CHAMELEON<br></span>
                        <div class="price-block-img"><img src="images/chamelion.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> Duxone<br></span>
                        <div class="price-block-img"><img src="images/Duxone.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> Novol<br></span>
                        <div class="price-block-img"><img src="images/novol.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> RANAL<br></span>
                        <div class="price-block-img"><img src="images/ranal.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span>
                            Reoflex<br></span>
                        <div class="price-block-img"><img src="images/reoflex.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> Solid<br></span>
                        <div class="price-block-img"><img src="images/solid.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="price-block-first small obraz" id="go">
                    <div class="price-block-sr ">
                        <span> U-POL<br></span>
                        <div class="price-block-img"><img src="images/upol.jpg" alt="" /></div>
                    </div>
                </div>
            </div>

Answer 1

[Lord_Dantes]

$("#spaklevka").click(function () {
                $("#shpakl").hide();
                $("#shpakl").slideToggle(500);
            });

Answer 2

[Виталий Киренков]

Как то так наверно. Но пример не особо понятен. Используйте в таких случаях codepen.io, на котором сразу видна проблема и можно её на месте решить.

$("#spaklevka").click(function () {
                $(".pop-block").slideUp(500);
                $("#shpakl").slideToggle(500);
            });

P.S. За названия типа "shpakl" отдельный минус в карму.

Answer 3

[zhen_safronov]

Все решил проблему, спс