Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

146
Views
How to keep menu expanded after clicking in some link?

How to keep the menu expanded after clicking on some links? It does not stay expanded after I click on a sublink. When I click on some link, a reload happens and the menu closes again. This is my stable attempt until now https://jsfiddle.net/yoongi/tq028mj4/3/.

function setChecked(check_id) {
    event.preventDefault();
    let checkbox = document.getElementById(check_id);
    checkbox.checked = !checkbox.checked;
}

function showSection(check_id, section_id) {
    let checkbox = document.getElementById(check_id)
    let section = document.getElementById(section_id);
    if (checkbox.checked) {
        section.style['opacity'] = 1;
        section.style['display'] = 'block';
    } else {
        section.style['opacity'] = 0;
        section.style['display'] = 'none';
    }
}
    .item-section {
        .display-itens {
            label {
                cursor: pointer;
                color: unset;
                text-indent: unset;
                margin-bottom: unset;
            }
            #isexpanded3 {
                display: none;
            }
        }
        ul {
            display: none;
            position: relative;
            li a{
                font-weight: unset;
                margin-left: 0.8em;
            }
            li:hover {
                background-color: #c4c4c4;
            }
        }
        #isexpanded3:checked + label > i {
            transform: rotate(180deg);
        }
    }
}
<li class="item-section">
           <div style="display:flex;" onclick="showSection('isexpanded3', 'itens-options-list');">
             <div class="display-itens">
               <input type="checkbox" id="isexpanded3"/>
               <label for="isexpanded3"><i style="margin-left: unset;" class="fa fa-chevron-down"></i></label>
             </div>
             <a href="" onclick="setChecked('isexpanded3')">items</a>
           </div>
           <ul id="itens-options-list">
              <li><a href="link-item1">item1</a></li>
              <li><a href="link-item2">item2</a></li>
           </ul>    
</li>

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!