Question

I’m trying to slide one div closed, and another open at the same time using a button. here is my div code:

<div class='toggle_parent'>
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='toggled_content' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>​

And then the jQuery is as follows:

$(document).ready(function(){

        $('.toggler').click(function() {
            $('.toggleHolder').slideUp().css('display', 'none')
            $('.toggled_conent').slideDown().css('display', '')
      });

    });​

I’ve tried so much that my brain doesn’t function anymore and I know the answer will be “so easy I should have figured it out”, but I’m stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.

Thanks in advance!

Answer 1

Hide your hidden content via javascript instead of the style, and get rid of the .css calls:

$(document).ready(function(){

    $('.toggled_content').hide();

    $('.toggler').click(function() {
        $('.toggleHolder').slideUp();
        $('.toggled_content').slideDown();
    });

});​

Also you had a typo in your .toggled_content selector.

Here’s a working JSFiddle.