CODEWITHSUNDEEP
phpjqueryhtmlcss
D Joe
D Joe

Reputation: 25

Jquery - How to use Hide() with a Checkbox to enable Animation(transition)?

Question: How do I use JQuery Hide() with animations for Sections of a Webpage? At the moment am using CSS: Display none.

Code

CSS 

.hide { display: none; }

HTML

<input type="checkbox" id="toggle-event-Sports" >
<section class="hide" id="section-sports">...</section>

Javascript:

<script>
    $(function() {
        $('#toggle-event-Sports').change(function() {    
            $("#section-sports").toggleClass('hide');
        })
    })
</script>

Upvotes: 1

Views: 167

Answers (2)

Shital Marakana
Shital Marakana

Reputation: 2887

try this below function for hide and show section 

    <input type="checkbox" id="toggle-event-Sports" value="1" onchange="valueChanged()">
        <section class="hide" id="section-sports">...</section>

        <script type="text/javascript">
        function valueChanged()
        {
             if($('#toggle-event-Sports').is(":checked"))   
                //$("#section-sports").show();
                $('#section-sports').fadeIn('slow');
            else
                //$("#section-sports").hide();
                $('#section-sports').fadeOut('slow');

        }
       </script>

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

Here is a simple working solution of what you need:

1. Slide up/Down animation:

$('#toggle-event-Sports').change(function() { 
    if($('#toggle-event-Sports').is(":checked"))   
        $("#section-sports").slideDown();
    else
        $("#section-sports").slideUp();
});
#section-sports{ width:100px; height:100px; background:red; display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="toggle-event-Sports" >
<section  id="section-sports">...</section>

2. Fade in/out transition:

$('#toggle-event-Sports').change(function() { 
    if($('#toggle-event-Sports').is(":checked"))   
        $("#section-sports").fadeIn();
    else
        $("#section-sports").fadeOut();
});
#section-sports{ width:100px; height:100px; background:red; display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="toggle-event-Sports" >
<section  id="section-sports">...</section>

Upvotes: 2

Related Questions