Div showing content by clicking button

Navigation
1

With this question already I researched several codes here but none worked, I have a button in the center of the screen and when I click I want it to show a specific test that is in a div, but what I write in the div is on the home page and the button does nothing, then what I wanted, click the start test button, and it calls that div, then inside that div have another button to follow for the next test and so on.

follow the code 

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>TESTE DO FREIO</title>
    <link rel="stylesheet" href="css/estilos.css">


    <style type="text/css"></style>
</head>

<body>

<label id="counter">0</label>

<div id="teste"></div>

<a class="meubotao" div="#teste01">INICIAR TESTE</a>

<div id="teste01">1. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>

<div class="footer">
&copy; 2017 PokaYoke Team | Elaborado por Felipe Deolindo
</div>

<script src="js/script.js"></script>
<script src="js/jquery.min.js"></script>


</body>
</html>

js 

$(document).ready(function () {

    var sensorValor = '';
    var testEnabled = false;
    var roundedValue = 0;

    $.ajaxSetup({ cache: false });

    setInterval(function () {
        $.get("IOCounter.htm", function (result) {
            $('#counter').text(result.trim());
            sensorValor = $('#counter').text();
        });v
    }, 100);

});

$(function(){
        $(".meubotao").click(function(e){
            e.preventDefault();
            el = $(this).data('element');
            $(el).toggle();
        });
    });

css 

body{
    background-color: #373435;
}

#teste{
    width: 1920px;
    height: 1080px;
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
}

.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;
}

.footer {
    position:absolute;
        top: 1080px;
        left: 800px;
}

.teste01 {
  visibility: hidden;
}
    
asked by anonymous 17.07.2017 / 13:36

1 answer

1

* Initial response but not complete.

As I understand it, you'd like a step-by-step test where the button moves on to the next step, so I've created an example for you to use, basing and using your initial code. We know that it will not depict 100% of your problem because I do not have access to the IOCounter.htm file, but you can adapt the code so that the counter also works correctly and then I will edit this answer later to be able to more concretely cover your question.

I've made here in jsFiddle the example for you to use.

    
17.07.2017 / 15:12
List data from Json with Angular 2 How to use the tableStack function in R