Skip to content

Instantly share code, notes, and snippets.

@ahgood

ahgood/index.html

Created January 12, 2018 02:00
Show Gist options
  • Save ahgood/66d1496ff35bf16db6415531d1be47c9 to your computer and use it in GitHub Desktop.
Save ahgood/66d1496ff35bf16db6415531d1be47c9 to your computer and use it in GitHub Desktop.
Download ZIP
TweenMax (slideToggle) height:auto
Raw
index.html
<div class="expander">
<div class="header">Click Me</div>
<div class="content">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="expander">
<div class="header">Click Me</div>
<div class="content">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.
</div>
</div>
<div class="expander">
<div class="header">Click Me</div>
<div class="content">the issue is the height which i need to set to auto as the information is different lengths.</div>
</div>
Raw
script.js
$(".expander").click(function(){
var $this = $(this),
$content = $this.find(".content");
if(!$this.hasClass("closed")){
TweenLite.to($content, 0.2, {height:0})
$this.addClass("closed")
}else{
//to open
// - temporarilty set height:auto
// - tween from height:0
TweenLite.set($content, {height:"auto"})
TweenLite.from($content, 0.2, {height:0})
$this.removeClass("closed");
}
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Raw
style.css
.expander {
width:300px;
border:solid 1px #555;
padding:10px;
margin:10px;
cursor:pointer;
}
.content{
overflow:hidden;
}
Raw
tweenmax-slidetoggle-height-auto.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment