Gostaria de ao clicar no botão iniciar teste, aparecesse a div contador, e ao clicar em proximo teste, sumisse a div id=01 e apenas mostrasse a id=02 e assim por diante, sempre quando clico em próximo teste ele escreve um texto abaixo do outro.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>TESTE DO FREIO</title>
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/botao.css">
<style type="text/css"></style>
</head>
<body>
<div id="contador"></div>
<label id="counter">0</label>
<div id="teste"></div>
<a class="meubotao" onclick="showDivcontador()">INICIAR TESTE</a>
<div class=testes>
<div align="center" id="01">1. Pressione e solte o pedal<br /> de freio do<br /> estacionamento várias<br /> vezes para checar se a<br /> pressão diminuiu.</div>
<div align="center" id="02">2. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>
<div align="center" id="03">3. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>
</div>
<div class="footer">
© 2017 PokaYoke Team | Elaborado por Felipe Deolindo
</div>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
estilos.css
body{
background-color: #373435;
}
#teste{
width: 1920px;
height: 1080px;
background-image: url('../images/background.jpg');
background-repeat: no-repeat;
}
.footer {
position:absolute;
top: 1080px;
left: 800px;
}
.testes div {
display: none;
}
.testes {
font: arial;
color: white;
font-size: 120px;
position:absolute;
top: 100px;
left: 100px;
align: center;
}
#counter {
display: none;
font-size: 120px;
color: black;
}
#contador {
width: 230px;
height: 80px;
background: white;
position: absolute;
top: 900px;
left: 650px;
border-left: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-top: 10px solid red;
display: none;
}
botão.css
.meubotao {
-moz-box-shadow: 0px 1px 0px 0px #000000;
-webkit-box-shadow: 0px 1px 0px 0px #000000;
box-shadow: 0px 1px 0px 0px #000000;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:3px solid #000000;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Georgia;
font-size:28px;
font-weight:bold;
padding:20px 50px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
position:absolute;
top: 500px;
left: 700px;
}
.meubotao:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.meubotao:active {
position:absolute;
top: 500px;
left: 700px;
}
.proxEtapa {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 24px;
border: 4px solid #000000;
border-radius: 100px;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#242124));
background: -moz-linear-gradient(top, #ffffff, #242124);
background: linear-gradient(to bottom, #ffffff, #242124);
text-shadow: #000000 1px 1px 0px;
font: normal normal bold 32px arial;
color: #ffffff;
text-decoration: none;
position:absolute;
top:980px;
left:1580px;
}
.proxEtapa:hover,
.proxEtapa:focus {
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#2b282b));
background: -moz-linear-gradient(top, #ffffff, #2b282b);
background: linear-gradient(to bottom, #ffffff, #2b282b);
color: #ffffff;
text-decoration: none;
position:absolute;
}
.proxEtapa:active {
background: #999999;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#242124));
background: -moz-linear-gradient(top, #999999, #242124);
background: linear-gradient(to bottom, #999999, #242124);
position:absolute;
top:980px;
left:1580px;
}
.proxEtapa:after{
content: "\0000a0";
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 -4px -6px 4px;
position: relative;
top: 0px;
left: 8px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeUlEQVRIie2UywqAIBQFh/K7b+R/h2008IEU3bOqAfGxcPTgFX7E7MCiFKQskQqkkkQt6eIKgAErcOS1p+OC5X6bncKjdXF5C7q4FILrJqG9jiMG4iIpSCNSCaqXJN08APFulgOsmUcGhfaGaYF5CqSfnfS7lm7+EU7SAZmTEL6ONwAAAABJRU5ErkJggg==") no-repeat left center transparent;
background-size: 100% 100%;
position:absolute;
top:980px;
left:1580px;
}
e o script.js
var testCounter = 0;
$(document).ready(function () {
var sensorValor = '';
var testEnabled = false;
var roundedValue = 0;
setInterval(function () {
sensorValor = $('#counter').text();
}, 100);
$(".meubotao").click(function(e){
var len = $('.testes div').length;
if (len > testCounter){
$('.testes div').eq(testCounter).show();
testCounter++;
if (len == testCounter){
$('.meubotao').hide(); //ultima etapa ja chegou
} else {
$('.meubotao').html('Próxima Etapa');
$('.meubotao').addClass('proxEtapa');
}
}
});
function showDivcontador(){
document.getElementById("meubotao").style.display = 'block';
}
});