Unlock button when hidden section appears

Question

I am developing an interactive infographic in which the person will have to go clicking on certain buttons to open the content related to this button, so far so good, but I wanted the person to press in a certain order, for example the button in section 2 only if it activated after she clicked the button in section 1 and so on, I don’t want to hide the buttons I want to make them visible and deactivate them until the person clicks on the button in the previous section. I’ll put an example of the code.

function aparecer(el) {
        var display = document.getElementById(el).style.display;
        if(display == "none"){
            document.getElementById(el).style.display = 'block';

            console.log('funcionou');
        }else{
            console.log('não funcionou');
        }
    }

<a href="#secao1"><img src="img.png" class="img-fluid" onclick="aparecer('secao1')"></a>
<a href="#secao2"><img src="img.png" class="img-fluid" onclick="aparecer('secao2')"></a>
<a href="#secao3"><img src="img.png" class="img-fluid" onclick="aparecer('secao3')"></a>

<div id="secao1" style="display: none;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere atque quisquam doloremque tempora dolorum facilis ea molestiae dolorem iure tempore, eos architecto eum aliquam quas officia quae natus animi provident.</p>
</div>
<div id="secao2" style="display: none;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, impedit dolorem soluta perferendis doloribus, odit vel vero iste itaque eos praesentium. Quisquam enim, aliquid harum eius vel a fugit rem?</p>
</div>
<div id="secao3" style="display: none;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero cumque ipsum impedit sed, accusantium dolorem modi quae iusto. Deserunt excepturi eaque mollitia voluptas fugiat accusantium assumenda aut perspiciatis libero provident. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores natus corrupti, sed velit iusto laborum obcaecati cumque dolore odit, tenetur, ullam commodi nam. Officiis omnis veritatis voluptatum ex aut in!</p>
</div>

Answer 1

try to use this parameter to disable the clickable, save in a variable your class to turn an array example

function aparecer(el) {
var x = document.getElementsByClassName("img-fluid");
document.getElementById("secao1").style.display = 'none';
document.getElementById("secao2").style.display = 'none';
document.getElementById("secao3").style.display = 'none';
x[1].disabled = true;
x[2].disabled = true;
       if(el == "secao1"){
         document.getElementById(el).style.display = 'block';
         x[1].disabled = false;
         x[2].disabled = true;
       }else if(el == "secao2"){
         document.getElementById(el).style.display = 'block';
         x[0].disabled = true;
         x[2].disabled = false;
        }else{
           document.getElementById(el).style.display = 'block';
           x[0].disabled = true;
           x[1].disabled = false;
         }
    }

test the example because I did it here in the service and I couldn’t test it. if it doesn’t work try to include an id and do it by id.

Answer 2

You can do this in a very simple way by chaining functions, to each click in the previous element the next element has its click event released:

$(() => {
  $('a:eq(0)').on('click', () => {
    $('#secao1').fadeIn('slow')
    destrava2()
  })

  function destrava2() {
    $('a:eq(1)').on('click', () => {
      $('#secao2').fadeIn('slow')
      destrava3()
    })
  }

  function destrava3() {
    $('a:eq(2)').on('click', () => {
      $('#secao3').fadeIn('slow')
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#secao1"><img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" class="img-fluid" width="190" height="100"></a>
<a href="#secao2"><img src="https://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2019/07/eclipse-solar-la-silla-eso-800x451.jpg" class="img-fluid" width="190" height="100"></a>
<a href="#secao3"><img src="https://timeline.canaltech.com.br/343084.1400/20-das-fotos-astronomicas-mais-legais-de-2019.jpg" class="img-fluid" width="190" height="100"></a>

<div id="secao1" style="display: none;">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere atque quisquam doloremque tempora dolorum facilis ea molestiae dolorem iure tempore, eos architecto eum aliquam quas officia quae natus animi provident.</p>
</div>
<div id="secao2" style="display: none;">
  <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
    dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<div id="secao3" style="display: none;">
  <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>