<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="wrapper">
<div class="wrapper-internal">
<button class="coE-toggle-button" onclick="toggle()">
Toggle button
</button>
<div class="myDIV d-none bounce div-1">
This could be used on an horizontal menu item that has a dropdown panel for example.
</div>
</div>
<div class="wrapper-internal">
<button class="coE-toggle-button primary" onclick="toggle1()">
With Chevron <i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<div class="myDIV d-none bounce div-2">
This could be used on an horizontal menu item that has a dropdown panel for example.
</div>
</div>
<div class="wrapper-internal">
<button class="coE-toggle-button" onclick="toggle2()">
With Arrow <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="myDIV d-none bounce div-3">
This could be used on an horizontal menu item that has a dropdown panel for example.
</div>
</div>
<div class="wrapper-internal">
<button class="coE-toggle-button" onclick="toggle3()">
With Collapse <i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="myDIV d-none bounce div-4">
This could be used on an horizontal menu item that has a dropdown panel for example.
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important;
font-size: 14px;
color: #4e4e4e;
}
section#wrapper {
flex-direction: row;
box-sizing: border-box;
display: flex;
margin: 20px;
}
.wrapper-internal {
flex: 1 1 0%;
box-sizing: border-box;
}
.coE-toggle-button {
background-color: white;
border: rgb(75, 205, 62) solid;
box-shadow: none;
color: rgb(1, 40, 52);
line-height: 2rem;
border-radius: 1.0625rem;
height: auto;
padding: 0rem 1.0625rem;
text-transform: none;
transition: background-color 0.3s ease-out 0s;
vertical-align: baseline;
text-align: center;
margin: 0;
min-width: 64px;
font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.coE-toggle-button:hover {
background-color: #4bcd3e;
border-color: #4bcd3e;
color: #012834;
}
.coE-toggle-button.primary:hover {
background-color: transparent;
outline: none;
}
.coE-toggle-button:focus {
box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
outline: none;
}
.coE-toggle-button.primary {
background-color: rgb(75, 205, 62);
border-color: rgb(75, 205, 62);
box-shadow: none;
color: rgb(1, 40, 52);
}
.d-none {
opacity: 0!important;
}
.myDIV {
display: block;
margin-top: 20px;
transition: all 0.6s ease;
opacity: 1;
transition: opacity 0.3s;
margin: 10px;
}
.wrapper-internal i.fa {
margin-left: 5px;
}
.fa-minus, .fa-chevron-up {
transition: all 0.6s ease;
transform: rotate(180deg);
}
.fa-caret-up {
transition: all 0.8s ease;
transform: rotate(360deg);
}
function toggle() {
document.querySelector('.div-1').classList.toggle("d-none");
}
function toggle1() {
document.querySelector('.fa-chevron-down').classList.toggle("fa-chevron-up");
document.querySelector('.div-2').classList.toggle("d-none");
}
function toggle2() {
document.querySelector('.div-3').classList.toggle("d-none");
document.querySelector('.fa-caret-down').classList.toggle("fa-caret-up");
}
function toggle3() {
document.querySelector('.fa-plus').classList.toggle("fa-minus");
document.querySelector('.div-4').classList.toggle("d-none");
}
