remember the panel states my solution

panelstates.js

/*
      this code is vanilla javascript with zero dependency
      this code is required for panels show and hide functionality 
      localstorage is use for remember the state of the panels.
    */
    "use strict";

    const togglePanel = document.querySelector(".togglepanel");
    const clashpanel = document.querySelector('.clashData');

    const fileView_toggle = document.querySelector(".fileView-toggle");
    const fileview = document.querySelector(".fileview");

    const clashDetail_toggle = document.querySelector(".clashDetail-toggle");
    const clashDetailView = document.querySelector(".clashDetails");
    
    function toggleOpen() {
      if (clashpanel.classList.contains('clashData-open')) {
        clashpanel.classList.remove("clashData-open");
        localStorage.setItem('clash_panel_state', 'open');
      } else {
        clashpanel.classList.add("clashData-open");
        localStorage.setItem('clash_panel_state', 'closed');
      }
    }

    function toggleFileView() {
      if (fileview.classList.contains('fileView-open')) {
        fileview.classList.remove("fileView-open");
        localStorage.setItem('file_panel_state', 'open');
      } else {
        fileview.classList.add("fileView-open");
        localStorage.setItem('file_panel_state', 'closed');
      }
    }

    function toggleClashDetail() {
      if (clashDetailView.classList.contains('clashDetail-open')) {
        clashDetailView.classList.remove("clashDetail-open");
        localStorage.setItem('clash_detail_state', 'open');
      } else {
        clashDetailView.classList.add("clashDetail-open");
        localStorage.setItem('clash_detail_state', 'closed');
      }
    }

    togglePanel.addEventListener('click', toggleOpen);
    fileView_toggle.addEventListener('click', toggleFileView);
    clashDetail_toggle.addEventListener('click', toggleClashDetail);

    // this function simply check the states from localstorage and set the states and classes for panels
    function checkthelayout() {
       if (typeof(Storage) !== "undefined") {
          var clash_panel_state = localStorage.getItem('clash_panel_state');
          var file_panel_state = localStorage.getItem('file_panel_state');
          var clash_detail_state = localStorage.getItem('clash_detail_state');
          
          if (clash_panel_state == 'closed') {
             clashpanel.classList.add('clashData-open');
          } else {
             clashpanel.classList.remove('clashData-open');
          }

          if (file_panel_state == 'closed') {
            fileview.classList.add('fileView-open');
          } else {
            fileview.classList.remove('fileView-open');
          }

          if (clash_detail_state == 'closed') {
            clashDetailView.classList.add('clashDetail-open');
          } else {
            clashDetailView.classList.remove('clashDetail-open');
          }

       } else {
         alert('your browser does not support localstorage, switch to chrome for better experience');
       }
    }

    window.addEventListener('load', checkthelayout);