CODEWITHSUNDEEP
jquerycss
Mr_Green
Mr_Green

Reputation: 41832

toggle class for height

In my project, I am trying to toggle the height of a div whenever the user clicks on the title bar, by giving the following properties such that only title bar appears(just like FB Chat).

css

.minimize{min-height:10px;max-height:50px;height:auto;}

jQuery

$('#chat-outline').toggleClass('minimize');

But I think because of already existing CSS properties of that div, the jQuery is not being assigned.

#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;
    min-height: 300px;
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;
    position: fixed;
    bottom: 20px;
    right: 10px;
    padding: 2px;
}

The jQuery function works good for all the properties(display,background-color,color,border) but it cant assign only height.

Here is the fiddle

EDIT: By the help of Sam3k solution, I came very close to the result

http://jsbin.com/uyanix/19/edit

Upvotes: 0

Views: 1400

Answers (4)

Chad
Chad

Reputation: 579

If you want to use .toggleClass() with CSS transitions then use MAX-HEIGHT and remove the height property completely. On the class you intend to append just set the max-height to a height you know you'll never reach. By doing this the container height will be controlled by the content (which to an extent is dynamic).

.container {
    display: block;
    background: #ff0000;
    max-height: 40px;
    -moz-transition: max-height 500ms ease-in-out;
    -webkit-transition: max-height 500ms ease-in-out;
    transition: max-height 500ms ease-in-out;
}

.appended-for-height {
    max-height: 600px;
}

Here is an example utilizing CSS transitions with .toggleClass() http://codepen.io/ChadR/pen/gpvWGE

Upvotes: 0

Sam3k
Sam3k

Reputation: 950

#chat-outline, it's probably taking precedence over .minimize. If older browsers like IE6 are not being supported you could probably do:

#chat-outline.minimize{min-height:10px;max-height:50px;height:auto;}

I wouldn't use !important as suggested above as it only targets certain browsers and it's more hacky. Try my suggestion as it might be a cleaner approach.

Update:

jsbin.com/uyanix/27

Upvotes: 1

michaelt
michaelt

Reputation: 182

Here's an example of the following fix: http://jsbin.com/uyanix/14

The toggle you created was toggling the class as expected, but here's a way where you can insure the height of your title-bar and provide a more explicit means to switch between a small and large size

CSS Changes

Make the title a fixed height, then toggle between min and max heights.

 #chat-title
    {
        height: 20px;
        width: 100%;
        background-color: #4B6C9E;
    }

    #chat-outline.minimize{height:5px;}    
    #chat-outline.maximize{height:100%;}



#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;

    min-height: 25px;  
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;

    position: fixed;
    bottom: 20px;
    right: 10px;
    padding: 2px;
}

Add max height to the toggle 2 classes using Jquery

$('#chat-title-name').on('click', function () {
               $('#chat-outline').toggleClass('minimize');
                 $('#chat-outline').toggleClass('maximize'); 

    });

Initialize the DOM div to maximized, this will get un-maximized later

<div id="chat-outline" class='maximize'>

Here's an example: http://jsbin.com/uyanix/14

Upvotes: 0

Wes Cossick
Wes Cossick

Reputation: 2933

Try adding an !important declaration to your height in the minimize class.

Upvotes: 1

Related Questions