I have two buttons with onclick functions. when btn1 is clicked the content related to the button is shown and btn2 is hidden and vice-versa. Onclick the button is active. When the page is loaded how can I get the last active button with the content in the div tag related to the button?

Here is the HTML and CSS

<style>

    .toggle-btn{
        background-color: lightblue;
        display: flex;
        justify-content:center;
        }

    .btn-1{
        width:30px;
        height:20px;
        border-top-left-radius:25px;  
        border-top-right-radius:;  
        border-bottom-right-radius:;  
        border-bottom-left-radius:25px;
          
    }
    .btn-2{
        width:30px;
        height:20px;
        border-top-left-radius:;  
        border-top-right-radius:25px;  
        border-bottom-right-radius:25px;  
        border-bottom-left-radius:;
    }
    .btn{
        width:55px;
        height: 38px;
        background: #fff;
        margin-right:1px;
        box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
        border: none;
        
        
    }
    .btn: focus {
         background: #f7f7f7;
            outline: none;
            -webkit-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
    }
    .container-1{display:flex;justify-content:center;
    }
    .container-2{display:none;justify-content:center;
    }
</style>


<div class="toggle-btn">
    
                <button type="button" class="btn btn-1 active" id="button1" onclick="before();">
                    btn1
                </button>
                <button type="button" class="btn btn-2" id="button2" onclick="after();">
                    btn2
                </button>
    </div>
    
    <div class="container-1" id="container-1">
                <span  >1000000</span> 
    </div>
    
    <div class="container-2" id="container-2">
                <span >2000000000</span> 
    </div>

Here is the Script for button function:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--button function onclick-->
<script>
         function before(){
             document.getElementById('container-2').style.display = "none";
         document.getElementById('container-1').style.display = "flex";
         }
          
         function after(){
             document.getElementById('container-2').style.display = "flex";
         document.getElementById('container-1').style.display = "none";
            
         }
    $(document).ready(function() {
            $('#button1').click(function() {
                $('#button2.active').removeClass("active");
                $('#button1').addClass("active");
                $('#button1').css("background-color", "grey");
                $('#button1').css("outline", "none");
                $('#button2').css("background-color", "#fff");
                localStorage.setItem("Activebtn","button1");
            });

            $('#button2').click(function() {
                $('#button1.active').removeClass("active");
                $('#button2').addClass("active");
                $('#button2').css("background-color", "grey");
                $('#button2').css("outline", "none");
                $('#button1').css("background-color", "#fff");
                localStorage.setItem("Activebtn","button2");
            });
            
        });

</script>

I want to get and show the last active button with the related content in the div tag on the page when page reload. Can anyone help. thanks:)

CodePudding user response：

This can be implemented using Window.localStorage.

This edited script is now saving the states of active & inactive buttons and active container on button click events.

It sets those states accordingly every time the document is loaded (again).

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--button function onclick-->
<script>
  function before(){
    document.getElementById('container-2').style.display = "none";
    document.getElementById('container-1').style.display = "flex";
  }
          
  function after(){
    document.getElementById('container-2').style.display = "flex";
    document.getElementById('container-1').style.display = "none";
  }
  
  $(document).ready(function() {
    $('#button1').click(function() {
      $('#button2.active').removeClass("active");
      $('#button1').addClass("active");
      $('#button1').css("background-color", "grey");
      $('#button1').css("outline", "none");
      $('#button2').css("background-color", "#fff");
      localStorage.setItem("activeBtnId","#button1");
      localStorage.setItem("inactiveBtnId","#button2");
      localStorage.setItem("activeContainerId","container-1");
    });

    $('#button2').click(function() {
      $('#button1.active').removeClass("active");
      $('#button2').addClass("active");
      $('#button2').css("background-color", "grey");
      $('#button2').css("outline", "none");
      $('#button1').css("background-color", "#fff");
      localStorage.setItem("activeBtnId","#button2");
      localStorage.setItem("inactiveBtnId","#button1");
      localStorage.setItem("activeContainerId","container-2");
    });

    if (localStorage.getItem("activeBtnId") !== null && localStorage.getItem("inactiveBtnId") !== null && localStorage.getItem("activeBtnId") !== null) {
      let activeButtonId = localStorage.getItem("activeBtnId"),
      inactiveButtonId = localStorage.getItem("inactiveBtnId"),
      activeContainerId = localStorage.getItem("activeContainerId");   
              
      if (activeContainerId == 'container-1') {
        before();
      } else if (activeContainerId == 'container-2') {
        after();
      }
         
      $(inactiveButtonId).removeClass("active").css("background-color", "#fff");
      $(activeButtonId).addClass("active").css({"background-color": "grey", "outline": "none"});
    }
  });
</script>