Question

you know how you open a hide\show spoiler and then open another one and it makes the page really long ?

the solution for it is to make the js check if the class is showing, if yes close the spoiler.

But im not sure how to do this.
This is the js code im using:

$(document).ready(function(){


    $(".hide1").hide();
    $(".spoiler1").show();

    $('.spoiler1').click(function(){
    $(".hide1").slideToggle();
    });

});

hide1 = the content that opens on click
spoiler1 = the toggle button.

Spoiler2, 3, 4 are the rest spoilers
so is hide2,3,4 are the rest contents.

this is the live site:

http://justxp.plutohost.net/slyfiles/index.html

EXAMPLE:

You click on the first box
this is the boxs area by the way:

http://gyazo.com/5df95ee77b95dfd932eab781955f98f3.png?1349209216

okay, it opened, then click on the second one..
And the content opens yet the first box hasn’t closed.

I want the first box to close after opening a new one.
to work like this for all boxs.

how do I do so?

Sorry for the awful grammar by the way.

Thanks!

Answer 1

You should link each spoiler to its corresponding hide via custom property:

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div>
<div id="hide1" class="hide">Hide 1</div>
<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div>
<div id="hide2" class="hide">Hide 2</div>
<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div>
<div id="hide3" class="hide">Hide 3</div>
<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div>
<div id="hide4" class="hide">Hide 4</div>​

The the behavior would be this:

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});​

See working fiddle: http://jsfiddle.net/adrianonantua/dyUwH/