Auto Animate Width/Height CSS3-JQuery
Admin
CSS Animate Auto is a helpful and effective jQuery module that makes employment of CSS3 changes to enliven HTML component's Height/Width to 'auto'. With CSS Animate Auto module you can without much of a stretch make an adaptable accordion menu, toggle-able holder or drop-down menu with energized grow/fall impacts.
1. Make a collapsible holder with auto stature.
<div id="demo" class="content">
EDIT YOUR CONTENT HERE
</div>
2. Make a catch to flip the holder or let we call it Create a button to toggle the container.
<button id="trigger">Open</button>
3. Call the module with all the default choices.
$('#trigger').click(function() {
$('#demo').cssAnimateAuto();
});4. Choices "Options"
// any CSS transition (shorthand) prop
transition: 'height 0.3s',
// or 'open' or 'close'
action: 'toggle',
openClass: 'is-opened',
eventNamespace: 'cssaa',
// any height value
to: false
});
});
so right now let me show you how it looks like
after you saw it i am sure you thinking how come create all this , no need to be worry i will guide you step by step
- at first you need
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawcdn.githack.com/TOAir/toa/f3a4d8bfab65bc22b948b636eda355e95f744319/jquery.cssAnimateAuto.js"></script>
<script src="https://rawcdn.githack.com/TOAir/toa/71fe0e41055b18fd864ee67175ed61b212b636c1/cssAnimateAuto-includes.js"></script>
insert them between the <body> -- </body> tag exactly bellow this one <body> or above this one </body>
Alert message : If you already have jQuery on your page, you shouldn't include it second time.
too you should to insert styles so insert them between <head> --- </head> its up to you ,may you put them after <head> or may you put them above </head> no different.
<link href="https://rawcdn.githack.com/TOAir/toa/bd4987f6e2cbef0b0f6594d389f342786d7431dc/css-jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://rawcdn.githack.com/TOAir/toa/2aa22d45374c15327911c07737b6d22631d7f6df/jQuery-CSS3-cssAnimateAuto-main.css" />
great right now we did more then 75% of the work, i will show you now examples
jQuery cssAnimateAuto Examples
1- Basic Height Content
<p>
<button id="basic-height-btn">Height</button>
</p>
<div id="basic-height-content" class="hidden">
<div class="hidden-inner">
<p> INSERT HERE WHAT YOU LIKE .</p>
</div>
</div>
<p>
2- Basic Width Content
<button id="basic-width-btn">Width</button>
</p>
<div id="basic-width-content" class="hidden-width">
<div class="hidden-inner">
<div class="width-hidden-inner">INSERT HERE WHAT YOU LIKE .</div>
</div>
</div>
3-Open Code Basic
<button id="open-code-basic" class="open-code" data-code="basic">Show the JS</button>
<button id="close-code-basic" class="close-code" data-code="basic" disabled>Hide the JS</button>
<div id="code-basic" class="hidden-code">
<div class="highlight">
<pre>
<code class="js">
INSERT YOUR ( CODE ,JS,HTML,CSS OR ETC).
</code>
</pre>
</div>
</div>
4-The Accordion
<dl class="accordion">
<dt class="accordion-trigger" tabindex="0">Megrim</dt>
<dd class="accordion-body hidden">
<div class="accordion-body-inner">
<p>INSERT FIRST CONTENT HERE</p>
</div>
</dd>
<dt class="accordion-trigger" tabindex="0">Giffgaff</dt> <dd class="accordion-body hidden">
<div class="accordion-body-inner"> INSERT SECOND CONTENT HERE.
</div>
</dd>
<dt class="accordion-trigger" tabindex="0">Chawbacon</dt> <dd class="accordion-body hidden"> <div class="accordion-body-inner"> <p>INSERT THIRD CONTENT HERE</p>
</div>
</dd>
</dl>
5- Open Code Accordion
<button id="open-code-accordion" class="open-code" data-code="accordion">Show the JS</button>
<button id="close-code-accordion" class="close-code" data-code="accordion" disabled>Hide the JS</button>
<div id="code-accordion" class="hidden-code">
<div class="highlight">
<pre>
<code class="js">INSERT YOUR ( CODE ,JS,HTML,CSS OR ETC).</code>
</pre>
</div>
</div>
6- The Dropdown Menu
Exhibiting the accompanying:
- a custom CSS progress
- a custom openClass
- how the module coordinates into marginally more confounded JavaScript/jQuery
exercises Lessen your viewport size to perceive how the menu reacts: the easily quickening dropdown turns into an easily vitalizing accordion.
<ul class="dropdown-menu">Don't forget to REPLACE # with your URL PATH and too change menu category and child's to what you like
<li>
<a href="#" class="dropdown-trigger">About</a>
<ul class="dropdown-submenu hidden">
<li><a href="#" class="dropdown-submenu-i">Disclaimer</a></li>
<li><a href="#" class="dropdown-submenu-i">Privacy Policy</a></li>
<li><a href="#" class="dropdown-submenu-i">Terms</a></li>
<li><a href="#" class="dropdown-submenu-i">Sitemap</a></li>
<li><a href="#" class="dropdown-submenu-i">Contact Us</a></li>
</ul>
</li>
<li> <a href="#" class="dropdown-trigger">Download</a>
<ul class="dropdown-submenu hidden">
<li><a href="#" class="dropdown-submenu-i">Moives</a></li>
<li><a href="#" class="dropdown-submenu-i">Series</a></li>
<li><a href="#" class="dropdown-submenu-i">Decomuntary</a></li>
</ul>
</li>
<li> <a href="#" class="dropdown-trigger">SEO</a> </li>
<li> <a href="#" class="dropdown-trigger">Blog Tips</a>
<ul class="dropdown-submenu hidden">
<li><a href="#" class="dropdown-submenu-i">Slideshow</a></li>
<li><a href="#" class="dropdown-submenu-i">Tooltip</a></li>
<li><a href="#" class="dropdown-submenu-i">Menu</a></li>
<li><a href="#" class="dropdown-submenu-i">Accordion</a></li>
<li><a href="#" class="dropdown-submenu-i">Tabs</a></li>
<li><a href="#" class="dropdown-submenu-i">Scroll</a></li>
<li><a href="#" class="dropdown-submenu-i">Lightbox</a></li>
</ul>
</li>
<li> <a href="#" class="dropdown-trigger">Earn Money</a> </li>
</ul>
7- Open Code Drop Down
<button id="open-code-dd" class="open-code" data-code="dd">Show the JS</button>
<button id="close-code-dd" class="close-code" data-code="dd" disabled>Hide the JS</button>
<div id="code-dd" class="hidden-code">
<div class="highlight">
<pre>
<code class="js">
INSERT YOUR ( CODE ,JS,HTML,CSS OR ETC).
</code>
</pre>
</div>
</div>
right now i think so that you understand it well , any way if you have any question feel free to put it into a comment ,at last enjoy the awesome trick with CSS Animate Auto Height/Width jQuery.