CODEWITHSUNDEEP
javascriptjqueryhtmlonclickclick
starbucks
starbucks

Reputation: 3016

How do I hide a div when its clicked and show another?

I have this query click function:

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

    $('.show_hide').click(function () {
        $(".box").fadeIn(400);
        //$(".box").fadeOut(2500);
    });
});
</script>

<div class="show_hide">Click Here</div>

  <div class="box" style="display:none;">
    <div class="success_message">
        <span class="yes">Yes</span> 
        <span class="no">No</span>
    </div>
</div>

Once "Click here" is clicked, I want to hide the click here option and show yes and no. But when either of those options (yes or no) are clicked i then want to hide them and show click here. How can I do this?

How can I achieve this?

Upvotes: 0

Views: 122

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Demo --> http://jsfiddle.net/52a4n/1/

$('.show_hide').click(function () {
    $(this).fadeOut();
    $(".box").fadeIn(400);
});

$('.yes,.no').click(function () {
    $(".box").fadeOut(250,function(){
        $('.show_hide').fadeIn();
    });
});

Upvotes: 2

VVV
VVV

Reputation: 7603

Check this fiddle

$(document).ready(function () {
    $('.show_hide').click(function () {
        $(this).fadeOut(400, function() {
            $(".box").fadeIn(400);
        });

    });

    $('.success_message span').click(function() {
        $(".box").fadeOut(400, function() {
            $('.show_hide').fadeIn(400);
        });
    })
});

Upvotes: 1

Bryan
Bryan

Reputation: 6752

You had the right approach so far, you just had to take it a little further. This should get you to where you're looking to go so long as you have box divs immediately followed by box divs

$(document).ready(function () {
    $('.show_hide').click(function () {
        $(this).hide().next().fadeIn(400);
    });

    $('.box .success_message span').click(function() {
        $(this).parents('.box:first').hide().prev().fadeIn(400);
    });
});

Upvotes: 1

Related Questions