Tukukkk

I am working on a portfolio website of my OJT experience. It's a project that is due 3 days and nearly complete.

My problem is that I'd like to keep the sidebar navigation open as well as the drop down links when I open a different page. For example, if I am on the Home page and I clicked the Rationale page on the sidebar, I'm taken to the Rationale page with the sidebar and drop down still open from the previous page (Home page in this example). I need the same for every page. If I can, I'd like to keep the current codes as much as possible, with just the new codes added on.

Sorry if the codes are messy, I had to relearn HTML and CSS for this project since I'm not very familiar and don't have much experience with web developing. Thank you.

HTML sidebar and dropdown

<div class="sidebar">

    <nav id='navigation' class="navigation">

        <div id="menuToggle" class="menuToggle">

            <input type="checkbox" />

            <span></span>

            <span></span>

            <span></span>

                <ul id="menu">



                    <button class="dropdown-btn">Introduction 

                    <i class="fa fa-caret-down"></i>

                    </button>

                          <div class="dropdown-container">

                              <a href="F:/website-ojt/introduction/intro.html#rationale">Rationale</a>

                              <a href="F:/website-ojt/introduction/intro.html#work-expectation">Work Expectation</a>

                              <a href="F:/website-ojt/introduction/intro.html#contact-details">Contact Details</a>

                              <a href="F:/website-ojt/introduction/intro.html#company-profile">Company Profile</a>

                              <a href="F:/website-ojt/introduction/intro.html#company-size">Company Size</a>

                              <a href="F:/website-ojt/introduction/intro.html#nature-business">Nature of Business</a>

                              <a href="F:/website-ojt/introduction/intro.html#divisions">Divisions/Departments</a>

                              <a href="F:/website-ojt/introduction/intro.html#organizational-chart">Organizational Chart</a>

                              <a href="F:/website-ojt/introduction/intro.html#company-pics0">Pictures of the Company</a>

                          </div>                              



                    <button class="dropdown-btn">Observation

                    <i class="fa fa-caret-down"></i>

                    </button>

                          <div class="dropdown-container">

                              <a href="F:/website-ojt/observation/observe.html#SWOT">SWOT Analysis</a>

                              <a href="F:/website-ojt/observation/observe.html#overall-observations">Overall Observation</a>

                          </div>



                    <button class="dropdown-btn">Anecdotal Reports 

                    <i class="fa fa-caret-down"></i>

                    </button>

                          <div class="dropdown-container">

                            <a href="F:/website-ojt/anecdotalreports/anecreport.html">Periodic Reports</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#prof-train">Professional Experiences and Training</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#tasks-assign">Tasks and Assignments</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#prob-enc">Problems Encountered</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#out-ach">Outstanding Achievements</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#sal-prac">Salient Practices</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#rel-cho">Relevance of the Chosen Training</a>

                            <a href="F:/website-ojt/anecdotalreports2/anecreport2.html#overall-exp">Overall Experiences</a>

                          </div>



                    <button class="dropdown-btn">Appendix 

                    <i class="fa fa-caret-down"></i>

                    </button>

                          <div class="dropdown-container">

                              <a href="F:/website-ojt/appendix/appendix.html#reco-lett">Practicum Recommendation Letter</a>

                              <a href="F:/website-ojt/appendix/appendix.html#liab-waiv">Agreement & Liability Waiver</a>

                              <a href="F:/website-ojt/appendix/appendix.html#eval-repo">Performance Evaluation Report</a>

                              <a href="F:/website-ojt/appendix/appendix.html#cert-hour">Certificate of Hours Worked</a>

                              <a href="F:/website-ojt/appendix/appendix.html#atte-sum0">Attendance Summary</a>

                              <a href="F:/website-ojt/appendix/appendix.html#pics-work">Pictures while in Actual Work</a>

                              <a href="F:/website-ojt/appendix/appendix.html#prof-resu">Professional Resume</a>

                         </div>

                </ul>

            </div>

        </nav>

    <script src="intro.js"></script>

</div>

CSS to style the sidebar

#menu a{

  padding:10px 10px 10px 30px;

  text-decoration:none;

  font-size:20px;

  color:#fff;

  display:block;

  transition: color 0.3s ease;

}

#menu a:hover{

  color:rgb(153, 153, 153);

}

#menuToggle::before{

  /* display:block;

  position: absolute; 

  content: "OJT Portfolio";

  width:144px;

  font-size: 18px;

  color:#f2f2f2;

  top: 1px;

  right: 44px; */

}

#menuToggle

{

display: block;

position: absolute;

top: 22px;

right: 22px;

z-index: 1;

-webkit-user-select: none;

user-select: none;

}

#menuToggle input

{

display: block;

width: 40px;

height: 32px;

position: absolute;

top: -7px;

left: -5px;

cursor: pointer;

opacity: 0;

z-index: 2;

-webkit-touch-callout: none;

}

#menuToggle span

{

display: block;

width: 33px;

height: 4px;

margin-bottom: 5px;

position: relative;

background: #cdcdcd;

border-radius: 3px;

z-index: 1;

transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

            opacity 0.55s ease;

}

#menuToggle span:first-child

{

transform-origin: 0% 0%;

}

#menuToggle span:nth-last-child(2)

{

transform-origin: 0% 100%;

}

#menuToggle input:checked ~ span

{

opacity: 1;

transform: rotate(45deg) translate(-2px, -1px);

background: #232323;

}

#menuToggle input:checked ~ span:nth-last-child(3)

{

opacity: 0;

transform: rotate(0deg) scale(0.2, 0.2);

}

#menuToggle input:checked ~ span:nth-last-child(2)

{

opacity: 1;

transform: rotate(-45deg) translate(0, -1px);

}

#menu

{

position: absolute;

height: 100vh;

width: 300px;

padding-bottom: 100%;

margin: -100px 0 0 0;

padding: 40px;

padding-top: 167px;

padding-left: 20px;

right: -60px;

background: #181818;

list-style-type: none;

-webkit-font-smoothing: antialiased;

transform-origin: 0% 0%;

transform: translate(100%, 0);

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}

#menu li

{

padding: 10px 0;

/* padding:0 10px 0 0; */

font-size: 22px;

}

#menuToggle input:checked ~ ul

{

transform: scale(1.0, 1.0);

opacity: 1;

}

.dropdown-btn {

  font-family: 'Anonymous Pro', monospace;

  padding: 22px 22px 22px 22px;

  text-decoration: none;

  font-size: 22px;

  color: #ffffff;

  display: block;

  border: none;

  background: none;

  width:100%;

  text-align: left;

  cursor: pointer;

  outline: none;

}

.sidenav a:hover, .dropdown-btn:hover {

  color: #818181;

}

.active {

  background-color: #2e2e2e;

  color: white;

}

.dropdown-container {

  display: none;

  background-color: #262626;

  padding-left: 8px;

}

.fa-caret-down {

  float: right;

  padding-right: 8px;

}