Here’s an example of showing and hiding divs with a CSS3 animation.
Demo: http://stevenhollidge.com/blog-source-code/showhide/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>CSS3 Animations: Show/Hide divs</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | |
| <style> | |
| .mainContainer { | |
| border-color: #ddd; | |
| border-width: 1px; | |
| border-radius: 4px 4px 0 0; | |
| border-style: solid; | |
| padding: 15px; | |
| margin: 30px; | |
| width: 275px; | |
| height: 260px; | |
| transition: 0.4s; | |
| } | |
| .mainContainerBig { | |
| height: 450px; | |
| transition: 0.4s; | |
| } | |
| .section { | |
| margin: 10px 0 0 0; | |
| transition: opacity 1s ease-in 0.2s; | |
| opacity: 0; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .visible { | |
| opacity: 1; | |
| height: auto; | |
| overflow: auto; | |
| } | |
| .labelRow { | |
| margin: 20px 0 0 0; | |
| } | |
| .textRow { | |
| margin: 0 0 0 0; | |
| } | |
| .bigLabel { | |
| font-size: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="mainContainer" class="mainContainer"> | |
| <div class="btn-group" data-toggle="buttons"> | |
| <label id="option1label" class="btn btn-primary active"> | |
| <input type="radio" name="options" id="option1" checked> Abbreviations | |
| </label> | |
| <label id="option2label" class="btn btn-primary"> | |
| <input type="radio" name="options" id="option2"> Actual Amounts | |
| </label> | |
| </div> | |
| <div id='smallSection' class='section visible'> | |
| <div class='row labelRow'> | |
| <div class='col-md-6'>Total</div> | |
| <div class='col-md-6'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560k</div> | |
| <div class='col-md-6 bigLabel'>560k</div> | |
| </div> | |
| <div class='row labelRow'> | |
| <div class='col-md-6'>Total</div> | |
| <div class='col-md-6'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560k</div> | |
| <div class='col-md-6 bigLabel'>560k</div> | |
| </div> | |
| </div> | |
| <div id='bigSection' class="section"> | |
| <div class='row labelRow'> | |
| <div class='col-md-12'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560,456,232.00</div> | |
| </div> | |
| <div class='row labelRow'> | |
| <div class='col-md-12'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560,456,232.00</div> | |
| </div> | |
| <div class='row labelRow'> | |
| <div class='col-md-12'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560,456,232.00</div> | |
| </div> | |
| <div class='row labelRow'> | |
| <div class='col-md-12'>Total</div> | |
| </div> | |
| <div class='row textRow'> | |
| <div class='col-md-6 bigLabel'>560,456,232.00</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script> | |
| $('label[id=option1label]').click(function() { | |
| showHideDivs(false); | |
| }); | |
| $('label[id=option2label]').click(function() { | |
| showHideDivs(true); | |
| }); | |
| function showHideDivs(showBig) { | |
| $('#mainContainer').toggleClass("mainContainerBig", showBig); | |
| $('#smallSection').toggleClass("visible", !showBig); | |
| $('#bigSection').toggleClass("visible", showBig); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
No comments:
Post a Comment