Show and hide div with jquery

I have a problem to show and hide some div. The only thing i have is a span with a class. Where we need to click on, to show or hide the div below the parent h2 I can't add some classe's to the h2 or div (this come from some cms, where we can't add a css class), so we need to do it with some jquery.

<div>
  <h2>
    <span class="h2toggle">Heading (This shows an hide the div below)</span>
  </h2>
  <div>
    <p>Some text</p>
    <p>More text</p>
  </div>
</div>

<div>
  <h2>
    <span class="h2toggle">Heading 2 (This shows an hide the div below)</span>
  </h2>
  <div>
    <p>Some text 2</p>
    <p>More text 2</p>
  </div>
</div>  

Now i have something like the following code. But now, when the page will be loaded. The div around "some text" & "more t开发者_如何转开发ext" will we hidden. But you can see that it is not hidden from the beginning. It's sliding up.

It should be hidden ( the div with text ) from the beginning. Without seeing any change to the page. After that the page is loaded, it must be possible to toggle on the headings.

(function ($) {
$(function () {
    $('.h2toggle').each(function () {
        $(this).parent('h2').addClass('h2toggle');
        $(this).removeClass('h2toggle');
        $(this).parent().siblings(':not(h2):visible').slideUp()
    });

    $('.h2toggle').click(function () {
        $(this).siblings(':not(h2):visible').slideUp()
        $(this).siblings(':not(h2):hidden').slideDown()
    });
});
})(jQuery);

Erm...easy?

$('.h2toggle').click(function(){
    var $span = $(this);

    $span.parent('h2').next('div').slideToggle();
});

Demo, btw

To make them start hidden, use the following:

$('.h2toggle').parent('h2').next('div').slideUp();

Unless I'm misunderstanding... Reference the H2, then grab the next div (which is declared below) and toggle its display.

If you want this more like a "show only one at a time" accordion, then I can revise the code, but I'm not interpreting it like that.

It appears that you are sliding everything up and then sliding everything down:

$('.h2toggle').click(function () {
    $(this).siblings(':not(h2):visible').slideUp()
    $(this).siblings(':not(h2):hidden').slideDown()
});

Perhaps this would work:

$('.h2toggle').click(function () {
    var visibleStuff = $(this).siblings(':not(h2):visible');
    var hiddenStuff = $(this).siblings(':not(h2):hidden').slideDown();

    visibleStuff.slideUp();
    hiddenStuff.slideDown();
});

Brad Christie is right, though... you just need to toggle.

$('.h2toggle').click(function () {
    $(this).siblings(':not(h2)').slideToggle();
});

demo using ternary operators:

DEMO FIDDLE

And it will act as a beautiful Accordion! (If other content is opened.. close it!)

$('.h2toggle').parent().next('div').hide();
$('.h2toggle').click(function() {
    var d = $(this).parent('h2').next('div');
 check = (d.is(':visible')) ?
         (d.slideUp()) :
         ($('.h2toggle').parent('h2').next('div').slideUp()) (d.slideDown());
});

In this case, how ternary operators work:

_____statement___    __is is true_      __________________is false______________________________________________
|                |   |            |    |      (do that)                                          (and that too) |
(d.is(':visible')) ? ( d.slideUp() ) : ( $('.h2toggle').parent('h2').next('div').slideUp() )   ( d.slideDown() );

... And you'll get the smallest script to get an accordion!
Happy coding!

Slide is doing an animation, eventually hiding the element. Use Hide instead:

(function ($) {
    $(function () {
        $('.h2toggle').parent().next('div').hide();
        $('.h2toggle').click(function () {
            $(this).parent().next('div').slideToggle();
        });
    });
})(jQuery);