Can someone help me with toggle method? Please see below my code
My problem is that by pressing on image toggle adds class of active, thus adding some CSS properties to it, however by consecutive pressing on the same image it doesn't remove class of active from it.
I cannot remove removeActiveClass function, because it has to go through NodeList and check which one has class of active and remove it, thus adding active only to the image that was clicked.
const panels = document.querySelectorAll('.panel');
panels.forEach((panel) => {
panel.addEventListener('click', () => {
removeActiveClasses();
panel.classList.toggle('active');
});
});
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active');
});
}
CSS CODE
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.6s;
}
#media(max-width: 768px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
Thanks in advance :)
Currently you just remove the active class from all your panels and then toggle the active class on the current panel so it will always get set to active (as the active class was just removed). You can try to check to see if the current panel already has the active class and if not then add the class after you call the remove:
panels.forEach((panel) => {
panel.addEventListener('click', () => {
const isActive = panel.classList.contains('active');
removeActiveClasses();
if (!isActive) {
panel.classList.add('active');
}
});
});
Related
So I made a loading screen in HTML and CSS, but I am very new to JavaScript and I would like to make the loading screen vanish when the page is loaded. How do I do it in JS? Here is my code:
.loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.dissaper {
animation: fadeOut 1s forwards;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div class="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
Using your CSS and HTML here is an example of how to hide the .loader div once the window has fully loaded using JS.
In my example i've changed .loader div class to #loader div ID for easier javascript.
I've also used transition CSS instead of animation CSS on the #loader div, which runs when .disappear class is added.
Here is jsfiddle version to... https://jsfiddle.net/joshmoto/z2dqe8jp/3/
See comments in JS and snippet console logs so you know JS timings with transition CSS, and when the #loader is removed.
// our loader div by id (not class)
let loader = document.getElementById('loader');
// on window loaded
window.onload = (event) => {
console.log('window loaded, and wait 3 secs for example #loader div to fade out');
// for demo example 3 second delay for page load
setTimeout(function() {
// add .disappear class to #loader div
loader.classList.add("disappear");
console.log('.disappear class added to #loader element');
// after 1 second css transition opacity .disappear has completed
// plus an extra 250 milliseconds so not to remove #loader before transition is complete
setTimeout(function() {
// remove #loader element from DOM entirely
loader.remove();
console.log('#loader div element removed from DOM');
// 1 second + 250 milliseconds delay
}, 1250);
// 3 seconds delay
}, 3000);
};
#loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 1 second opacity ease transition */
transition: opacity 1s ease;
}
.disappear {
opacity: 0;
pointer-events: none;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div id="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
you can check if the document loading is complete then:
1- remove the element. or
2- hide the element.
I added 1 second but you can remove it if you want.
comment remove then uncomment hide to see how it works then decide which one is suitable for you.
// remove
if (document.readyState = "complete") {
setTimeout(() => {
document.getElementById("loader").remove();
}, 1000);
}
// OR
// hide
if (document.readyState = "complete") {
setTimeout(() => {
// document.getElementById("loader").style.display = "none";
}, 1000);
}
.loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.dissaper {
animation: fadeOut 1s forwards;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div class="loader" id="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
I have a plus sign that appears if you push the space button. But now it appears once. Can you help me to make it appear every time I press the space button? Here is my Code Pen.
import './style.scss';
let counter = 0;
document.addEventListener('keydown', ({ keyCode }) => {
const increment = document.getElementsByClassName('increment')[0];
if (keyCode === 32) {
counter++;
document.getElementsByClassName('counter')[0].innerText = counter;
increment.classList.remove('hidden');
increment.classList.add('move-increment');
}
});
.container {
/* ... */
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.move-increment {
margin-top: -20px;
opacity: 0;
}
.hidden {
visibility: hidden;
}
.increment {
position: absolute;
margin-left: -33px;
z-index: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1),
opacity 1s ease-in-out;
}
}
Although I consider #ikiK's answer as the correct answer because the question was specifically about using CSS transitions, I would like to share a different approach. I think the goal of the 'plus' icon is to be displayed each time the counter increments. But when the counter increments while the transition of the previous increment is still playing it is impossible to display a second 'plus' symbol.
My suggestion would be to use some jQuery and, on each increment, append a new li item to an unordered list that is positioned right on top of the counter. Animate that li, fading it out to the top. And then use the callback function of animate() to remove the li element from the DOM once it has faded out of view.
let counter = 1;
$(document).on( 'keypress',function(e) {
if( e.which == 32 ) {
$('.counter').text(counter++);
let increment = $('<li><span class="increment">+</span></li>');
$('#increments').append(increment);
increment.animate({
opacity: 0,
top: '-=30px'
}, 500, function() {
increment.remove();
});
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 500px;
align-items: top;
justify-content: center;
position: relative;
overflow: hidden;
height: 100px;
}
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
#increments {
padding: 0px;
z-index: 1;
float: left;
margin-left: -33px;
list-style: none;
}
#increments li {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>Counter: <span class="counter">0</span></p>
<ul id="increments"></ul>
</div>
Remove added .move-increment and add again removed hidden classes with slight delay, this will re-apply your transition: margin-top (read in provided links why delay):
setTimeout(function() {increment.classList.add('hidden');
increment.classList.remove('move-increment');}, 600);
Solution (changed key-code to arrow up: ↑ ):
let counter = 0;
document.addEventListener('keydown', ({
keyCode
}) =>
{
const increment = document.getElementsByClassName('increment')[0];
if (keyCode === 38) {
counter++;
document.getElementsByClassName('counter')[0].innerText = counter;
increment.classList.remove('hidden');
increment.classList.add('move-increment');
setTimeout(function() {
increment.classList.add('hidden');
increment.classList.remove('move-increment');
}, 600);
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
}
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.move-increment {
margin-top: -20px;
opacity: 0;
}
.hidden {
visibility: hidden;
}
.increment {
position: absolute;
margin-left: -33px;
z-index: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
<div class="container">
<div>
Counter: <span class="counter">0</span>
<span class="increment hidden">+</span>
</div>
</div>
But however, this is not working perfectly when pressing key too fast. Try changing setTimeout duration and see what suits your need.
In links provided you have examples how to reset animation (not transition) all together and would solve this fast key press issues.
Read about this here, few really useful info's:
Restart CSS Animation
Controlling CSS Animations and Transitions with JavaScript
I think you don't need to hidden class, Simply you can use setTimeout for reset class, like this:
let counter = 0;
document.addEventListener("keydown", ({ keyCode }) => {
const increment = document.getElementsByClassName("increment")[0];
if (keyCode === 32) {
counter++;
document.getElementsByClassName("counter")[0].innerText = counter;
increment.classList.add("move-increment");
setTimeout(function () {
increment.classList.remove("move-increment");
}, 1000);
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 500px;
align-items: center;
justify-content: center;
}
.container .counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.container .increment {
position: absolute;
margin-left: -33px;
z-index: 1;
visibility: hidden;
margin-top: 0;
opacity: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
.container .increment.move-increment {
visibility: visible;
margin-top: -20px;
opacity: 0;
}
<div class="container">
<div>
Counter: <span class="counter">0</span>
<span class="increment">+</span>
</div>
</div>
I have a pretty standard navigation bar, with a list containing the links to my sub-sites. I have added a hamburger-menu icon to the website, which should appear on small and mobile screens. Also, I hide the links, by setting their font-size to zero via the css media query. If the menu icon is clicked I fire a javascript function, that will increase/decrease the fontsize of the links accordingly.
All of this works pretty nicely, there is only one issue. As soon as I resize my browser after the font-size of the links has been changed by the script, those values are kept and not updated by the media query for some reason. So, depending on whether the mobile menu was open or closed, the fontsize is either extremely big, or zero. Why aren't these values updated when resizing the browser back to full-screen?
code-snippet containing the necessary code to reproduce:
var open = false;
function openmobilemenu() {
var nav = document.getElementsByTagName("nav");
var links = nav[0].getElementsByTagName("li");
if (!open) {
for (var i = 0; i < links.length; i++) {
links[i].style.transition = "0.5s";
links[i].style.fontSize = "10vw";
}
open = true;
}
else {
for (var i = 0; i < links.length; i++) {
links[i].style.fontSize = "0";
}
open = false;
}
}
header {
position: relative;
width: 100%;
height: 200px;
background-image: url("../img/header.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #CDCCCA;
}
header img {
position: absolute;
width: 500px;
padding: 0 15%;
bottom: 10px;
}
.mobilemenu {
display: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
transition: none;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 800px), (hover:none) {
.mobilemenu {
display: flex;
color: #61625B;
font-size: 100px;
margin: auto 5%;
}
.mobilemenu a, a:hover, a:active {
text-decoration: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
min-height: 10px;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative;
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 0;
height: auto;
}
nav li:hover {
background-color: #8b131f;
}
.navunderline {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<img src="img/logo.png" alt="some alt" />
<a href="javascript:void(0);" class="mobilemenu" onclick="openmobilemenu()">
<i class="fa fa-bars"></i>
</a>
</header>
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
This is because your JS is setting inline styles on your elements and inline styles are always more specific than anything in your stylesheet.
There are three ways around this:
Use JS on window resize to remove those styles.
Don't inline styles, but add/remove classes on those elements on resize. Use your stylesheet to control the styles for those elements.
Set the font styles to !important in your stylesheet (the only way around specificity - not recommended)
There are similar questions like this and this, but don't address this situation.
The goal is to slide a menu onto the screen with CSS translation when its parent is shown. However, showing the parent then applying the CSS class to trigger the translation happens instantly instead of over time. Effectively, there's no animation.
JavaScript could be used to slide the child element onto the screen, but the goal is to keep as much of the animation logic in CSS.
Setting the opacity to 0 doesn't work because we need the menu and its parent to not take any space or be part of the layout.
Codepen: https://codepen.io/Crashalot/pen/YzXmjYj
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 0.3s ease-in-out;
transform: translate(-100%);
}
#sidebar.show .menuBox {
transform: translate(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
You can't animate display: none; Set opacity to 0 and then 1 on toggle class. Here's the CodePen for you. ;)
I added a button for the toggle event. Let me know if you need any more help!
enter link description here
$(".btn").on("click", toggleSidebar);
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
body {
margin: 0;
padding: 0;
}
#sidebar {
opacity: 0;
transition: all 300ms ease-in-out;
}
#sidebar.show {
display: block;
opacity: 1;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 300ms ease-in-out;
-webkit-transform: translate(-100%);
}
#sidebar.show .menuBox {
-webkit-transform: translate(0);
}
.btn {
position: absolute;
top: 10px;
left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<button class="btn">Click</button>
You need to consider an animation. The animation will run automatically when the element appear on the screen
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transform: translate(-100%);
animation: show 0.3s ease-in-out forwards;
}
#keyframes show {
to {
transform: translate(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none. ref
I think you should define the action for your function called. When load page or on click like below:
$(document).ready(function () {
$('#sidebar').on('click', function () {
$(this).toggleClass('show');
});
});
How do you achieve VueJS-like control over transitions using vanilla JavaScript?
The goal is to make an element have display: none; when it's hidden, but maintain the ability to fade it in/out.
I managed to make it fade out by applying a class with an opacity of 0 and then listening for the transitionend event to swap the class with a hide class that sets display: none;. That part actually seems to work well...
However, when trying to do the inverse, it seems to fail. Instead of tranitioning in; it ignores the transition entirely and just appears with full opacity and never fires a transitionend event.
const btnShow = document.querySelector('#btnShow');
const btnHide = document.querySelector('#btnHide');
const div = document.querySelector('div');
btnShow.addEventListener('click', () => {
console.log('btnShow clicked');
div.classList.remove('hide');
div.classList.add('div-enter');
div.classList.replace('div-enter', 'div-enter-to');
div.addEventListener('transitionend', function() {
console.log('show transition ended');
div.classList.remove('div-enter-to');
}, { once: true });
});
btnHide.addEventListener('click', () => {
console.log('btnHide clicked');
div.classList.add('div-leave');
div.classList.replace('div-leave', 'div-leave-to');
div.addEventListener('transitionend', () => {
console.log('hide transition ended');
div.classList.replace('div-leave-to', 'hide');
}, { once: true });
});
.hide {
display: none;
opacity: 0;
}
.div-enter {
opacity: 0;
}
.div-enter-to {
opacity: 1;
}
.div-leave {
opacity: 1;
}
.div-leave-to {
opacity: 0;
}
/* Irrelevant styles */
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 1em 1.5em;
font-size: 100%;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 1em 0;
padding: 3rem 0;
width: 50%;
background: #4bfa;
border-radius: 5px;
transition: all 1s linear;
}
button {
border: none;
border-radius: 2px;
}
button:hover {
cursor: pointer;
}
<button id="btnShow">show</button>
<button id="btnHide">hide</button>
<div>
fade out, then set display: none<br />
then do the reverse...
</div>
The hide class should be written like:
.hide {
visibility: hidden;
opacity: 0;
}
CSS transitions and animations allow you to animate a specific set of CSS properties. You cannot animate the display property.
Source: https://www.w3.org/TR/css-transitions-1/#animatable-properties
Use animations instead of transitions , working example of your changed code provided below.
const btnShow = document.querySelector('#btnShow');
const btnHide = document.querySelector('#btnHide');
const div = document.querySelector('div');
btnShow.addEventListener('click', () => {
div.classList.remove('hide');
div.classList.add('fade-in');
div.addEventListener('animationend', function() {
div.classList.remove('fade-in');
}, { once: true });
});
btnHide.addEventListener('click', () => {
console.log('btnHide clicked');
div.classList.add('fade-out');
div.addEventListener('animationend', () => {
div.classList.replace('fade-out', 'hide');
}, { once: true });
});
#keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fade-in {
100% {opacity: 1;}
0% {opacity: 0;}
}
.hide { display: none; }
.fade-out {animation-name: fade-out; animation-duration: 1s; }
.fade-in {animation-name: fade-in; animation-duration: 1s; }
/* Irrelevant styles */
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 1em 1.5em;
font-size: 100%;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 1em 0;
padding: 3rem 0;
width: 50%;
background: #4bfa;
border-radius: 5px;
transition: all 1s linear;
}
button {
border: none;
border-radius: 2px;
}
button:hover {
cursor: pointer;
}
<button id="btnShow">show</button>
<button id="btnHide">hide</button>
<div>
fade out, then set display: none<br />
then do the reverse...
</div>
I was able to get it working by wrapping the enter animations in a setTimeout(() => {}, 0);
I don't fully understand why this works, so I'd appreciate comments explaining it. I had tried putting them in a requestAnimationFrame() but that didn't seem to have the same effect.
If anyone knows a better or cleaner way to accomplish this, I'd love to see it.
const btnShow = document.querySelector('#btnShow');
const btnHide = document.querySelector('#btnHide');
const div = document.querySelector('div');
btnShow.addEventListener('click', () => {
console.log('btnShow clicked');
div.classList.replace('hide', 'div-enter');
setTimeout(() => {
div.classList.replace('div-enter', 'div-enter-to');
div.addEventListener('transitionend', function() {
console.log('show transition ended');
div.classList.remove('div-enter-to');
}, { once: true });
}, 0);
});
btnHide.addEventListener('click', () => {
console.log('btnHide clicked');
div.classList.add('div-leave');
div.classList.replace('div-leave', 'div-leave-to');
div.addEventListener('transitionend', () => {
console.log('hide transition ended');
div.classList.replace('div-leave-to', 'hide');
}, { once: true });
});
.hide {
display: none;
opacity: 0;
}
.div-enter {
opacity: 0;
}
.div-enter-to {
opacity: 1;
}
.div-leave {
opacity: 1;
}
.div-leave-to {
opacity: 0;
}
/* Irrelevant styles */
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: .5em 1em;
font-size: 100%;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 1em 0;
padding: 2rem 0;
width: 50%;
background: #4bfa;
border-radius: 5px;
transition: all 1s linear;
}
button {
border: none;
border-radius: 2px;
}
button:hover {
cursor: pointer;
}
<div>
fade out, then set display: none<br />
then do the reverse...
</div>
<button id="btnShow">show</button>
<button id="btnHide">hide</button>