michaelmcgurk michaelmcgurk - 1 month ago 6
CSS Question

Hide container div on click

I click

Click Me!
to display the
#formcontainer
div.

I click it again to hide it, but it doesn't hide :-(

Can someone explain why?

Demo: https://jsfiddle.net/v809wxp9/



jQuery(document).ready(function($) {

// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').css('height', 'auto');
}
});

});

/*SUb Page Banner*/

#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>


<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">

<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>


</div>




Answer

You are only remove the class at time of click.Then else statement add with class$('#formcontainer').addClass('hassent');.Its get back with original position.

jQuery( document ).ready(function($) {

        // Control Banner toggle on sub pages
        $('#sub-page-banner .tog').click(function(){
            if ($("#formcontainer").hasClass("hassent")) {
                $('#formcontainer').removeClass('hassent');
                $('#topimage').slideDown();
                $('#formcontainer').css('height', '0');
            }else{
               $('#formcontainer').addClass('hassent');
                $('#topimage').slideUp();
                $('#formcontainer').css('height', 'auto');
            }
        });

    });
/*SUb Page Banner*/
    #sub-page-banner{
        padding:15px;
        background: #3887c2;
        color: #fff;
        cursor: pointer;
        font-size:30px;
        text-transform:uppercase;
        letter-spacing:3px;
    }

    #sub-page-banner .tog{
        margin-top:0px !important;
        width: 100%;
        font-size: 13px !important;
        text-align: center;
    }

    #formcontainer{
        overflow:hidden;
        height:0;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
                    <div class="container-fluid" id="sub-page-banner">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="btn tog">Click me!</div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-6 col-md-8 col-sm-12 topmain">
                                    <div id="theform">
                                        <div class="row">
                                                
                                                <div class="col-md-12">
                                                    <h1>Hello - Test my form please :-)</h1>
                                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


    </div>