CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Jonathan George
Jonathan George

Reputation: 125

Using jQuery to slide one div open and one closed

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!

Upvotes: 1

Views: 388

Answers (3)

Adeel Mughal
Adeel Mughal

Reputation: 736

Please change class name = "toggled_content" to something else in div and jquery so this looks like

jQuery

<script type="text/javascript">
$(document).ready(function(){

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

    });
</script>

HTML

<div class='toggle_parent' style="background-color:#999;">
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='haveOther' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>

This will work for you.

Upvotes: 0

freejosh
freejosh

Reputation: 11383

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.

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Have you tried this?

$('.toggler').click(function() {
        $('.toggleHolder').slideUp().hide();
        $('.toggled_conent').slideDown().show();
  });

Upvotes: 0

Related Questions