如何使每次点击仅打开一个按钮？

Question

我正在尝试制作一个图表，单击中心按钮后打开其步骤。到目前为止，中心按钮可一次打开所有步骤，但我希望单击一次即可打开第一步，第二次单击即可打开第二步，等等。

我尝试使用点击功能，但对我来说不起作用。

    .main { 
        background-color: gray; 
        cursor: pointer; 
        z-index: 50; 
    } 

    /* Set the position, height and  
        width of menu button */ 
    .main .title { 
        margin: auto; 
        position: absolute; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 80px; 
        font-size: 16px; 
        line-height: 80px; 
        text-align: center; 
        color: blue; 
    } 

    /* Set position, height and width  
        of buttons */ 
    .button { 
        margin: auto; 
        position: absolute; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0; 
        width: 110px; 
        height: 110px; 
        border-radius: 40%; 
        transition: all 0.4s ease-in; 
    } 
    .button i { 
        width: 100%; 
        font-size: 20px; 
        line-height: 50px; 
        text-align: center; 
        color: white; 
    } 
    .main { 
        border:2px solid blue; 
    } 
    .button { 
        border:2px solid black; 
    } 

    /* Positioning of buttons */ 
    #check:checked ~ .main + .icons .button { 
        opacity:0.8; 
    } 
    #check:checked ~ .main + .icons .button:nth-of-type(1) { 
        top: -100%; 
        left: -480%; 
        background-color: blue; 
        transition-delay:0.2s; 
    } 
    #check:checked ~ .main + .icons .button:nth-of-type(2) { 
        top: -230%; 
        left: -250%; 
        background-color: blue; 
        transition-delay:0.4s; 
    } 
    #check:checked ~ .main + .icons .button:nth-of-type(3) { 
        top: -280%; 
        background-color: blue; 
        transition-delay:0.6s; 
    } 
    #check:checked ~ .main + .icons .button:nth-of-type(4) { 
        top: -230%; 
        right: -250%; 
        background-color: blue; 
        transition-delay:0.8s; 
    } 
    #check:checked ~ .main + .icons .button:nth-of-type(5) { 
        top: -100%; 
        right: -480%; 
        background-color: blue; 
        transition-delay:01.0s; 
    } 
</style> 

     

<label class="main" for="check"> 
    <div class="title"> 
        <b>Get Started!</b> 
    </div> 
</label> 

<!--Buttons that link with the other pages -->
<div class="icons"> 
    <a class="button" href="#" > 
    </a> 
    <a class="button" href="#" > 
        <i class=""></i> 
    </a> 
    <a class="button" href="#"> 
        <i class=""></i> 
    </a> 
    <a class="button" href="#"> 
        <i class=""></i> 
    </a> 
    <a class="button" href="#"> 
        <i class=""></i> 
    </a> 
</div> 

如前所述，我的目标是一次打开每个步骤，但是现在它们一次全部打开。