Variable Visions

Articles jQuery jQuery-and-CSS3-Garage-Doors-using-toggleClass


tutorials - jQuery and Web-Development.

jQuery and CSS3 Garage Doors using .toggleClass

Published Mon. Sep. 17, 2012


Simply change the height of the toggled class

            /* GARAGE DOORS using .toggleClass with .click
                easing is optional...but the duration smooths the transition.
            */

            /* WHEN YOU CLICK ON ANY DIV CLASS FRONTPAGETEXTAREA, ANCHOR TAGS WITHIN EXCLUDED, YOU WILL TOGGLE A CLASS NAMED frontpagetextareaclass2 to .frontpagetextarea which simply changes the height from 50px to 200px.  I add the speed for the smoothing and easing is optional. This is a good solution when you want to slide something, after clicking on itself (rather than a DIFFERENT button targeting another element). Although this adds an additional rule in your CSS file, I like the restyle for different sizes left in the CSS so the original js doesn't need to be modified. I could have used slideToggle but remember, you cant hide yourself and expect to come back if you are the click target :)
            */

 

 

            jQuery('.frontpagetextarea').click(function(e){
                if(!jQuery(e.target).is("a")){
                    // jQuery(this).disableTextSelect();
                    jQuery(this).toggleClass('frontpagetextareaclass2', 1000, 'easeInOutCirc');
                }
            });

 

 .frontpageblock {
    position: relative;   
    height: 220px;
}  

.frontpagetextarea {
    position: absolute;
    bottom: 0px;
    height: 70px;
    padding: 0px 20px 20px 20px;
    opacity: .8;
    overflow: hidden;
    /* Without duration in the jQuery you can smooth the transition using CSS3 if you prefer
    -moz-transition-duration: .5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
      -o-transition-property: all;
    -o-transition-duration: .5s;
    */
}
.frontpagetextareaclass2 {
    height: 200px;
    opacity: .9;
}

 

 


Here is an alternate version using .hover and .animate ( I couldn't get .click to work to "toggle" the .animate)
But it works great on hover…by changing the above script from .click to .hover would work…but not well…try it.
       
            /* GARAGE DOORS VER.3 .animate with .hover */
            /*
            $('.frontpagetextarea').hover(function(){
                $(this).animate({'height': '200px'}, 500);
            }, function(){
                $(this).animate({'height': '50px'}, 500);
            });
           
            */


Tag(s): .toggleClass