Skip to content

Instantly share code, notes, and snippets.

@stevenh77

stevenh77/showhidedivs

Created October 27, 2014 11:22
Show Gist options
  • Save stevenh77/587656c95c945353f47c to your computer and use it in GitHub Desktop.
Save stevenh77/587656c95c945353f47c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
showhidedivs
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment