CODEWITHSUNDEEP
jquerycsstoggletransition
Sharivari
Sharivari

Reputation: 103

Max-Height Transition

well.. I have this problem and it seems that there is no solution out there that will work, it seems like its not even possible to do this in CSS, but I really can't believe it, because its one of those things you should definetly be able to do.

$('logo-toggler').on('click', function(){
    $('#logo-box').toggleClass('no-view');    
});

<logo-toggler>Klick to open</logo-toggler>
<br>
<br>
<div id="logo-box" class="no-view">Lorem ipsum dolor sit amet...</div>

#logo-box { 
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.no-view {
    opacity: 0 !important;
    max-height: 0px !important;
}

It works fine. The box opens and closes as it should. But here is the first of two problems: If i set the max-height to high, the transition effect isn't smooth, so I have to get the exact height of my text-box everytime I change the text or have another textbox.

That would be okay, if there would be an exact size, but there isn't. If I look at the website from a smaller device, the textbox gets heigher and heigher, until I don't see the full text even if the Box is open.

How is it possible the change the max-height to a dynamic height AND get the transition effect, because transition obviously doesn't work with dynamic heights.

Upvotes: 0

Views: 582

Answers (1)

Sharivari
Sharivari

Reputation: 103

  $(function() {   
    
        var name = ('logo');
        var toggler = (name+'-toggler');
        var div = ('#'+name+'-box');
        var toggled_class = ('no-view');        
        var plus_minus_img_id = ('#'+name+'-box-image');
        
        $(toggler).on('click', function(){
            $(div).toggleClass(toggled_class)
            
            var src = ($(plus_minus_img_id).attr('src') === 'http://www.styledesign.de/webpage3/images/plus.png')
            ? 'http://www.styledesign.de/webpage3/images/minus.png'
            : 'http://www.styledesign.de/webpage3/images/plus.png';
            
            setTimeout(function(){
                $(plus_minus_img_id).attr('src', src);
            }, 500);
            
            
        });

        var height = $(div).outerHeight();
        $(div).css('max-height', height+'px');
        $(div).toggleClass(toggled_class);
}) 
logo-toggler{
    cursor: pointer;
    display: table-cell;
}

#logo-box{ 
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    border: 1px solid black;
}

#logo-box-image{
    display: inline-block;
    vertical-align: middle;
}

.no-view{
    opacity: 0 !important;
    max-height: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<logo-toggler>Logo<img id="logo-box-image" src="http://www.styledesign.de/webpage3/images/plus.png"/></logo-toggler>
                <br>
                <div id="logo-box">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
                </div>

Well, i solved it, using JQuery:

First, i removed the class "no-view" from the div id, so that it's opened at the start. I also removed the max-height attribute from the #logo-box, so that there is none.

Then I added this script to my code:

<script>
    var height = $("#logo-box").outerHeight();
    $("#logo-box").css('max-height', height+'px');
    $('#logo-box').toggleClass('no-view');
</script>

I get the height of the div and add it ass max-height to css of #logo-box, no I have everytime the right max-height related to the content.

After that I close the box by adding the class "no-view".

That's it.

Upvotes: 1

Related Questions