Response title
This is preview!
Retain active section on refresh or selection
in Using jQuery
•
9 years ago
I have a legacy menu system which I need to adapt to be able to retain the selected option and leave the section open. Is this possible with the code below? If not I'll have to go down the true accordion/cookie route which i'd like to avoid.
<div id='cssmenu'> <ul> <li class='has-sub'><a href='#'><span>Applicant Details</span></a> <ul> <li>link</li> <li>link</li>
<li>link</li>
</ul> </li> <li class='has-sub'><a href='#'><span>Manage Details</span></a>
<ul> <li>link</li> <li>link</li>
<li>link</li>
</ul> </li>
</ul> </div> <script> $('#cssmenu ul ul li:odd').addClass('odd'); $('#cssmenu ul ul li:even').addClass('even'); $('#cssmenu > ul > li > a').click(function () { $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if ($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); </script> <style> /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-size: 14px; position: relative; text-align: left; } #cssmenu a { line-height: 1.3; padding: 6px 15px; } #cssmenu { width: 263px; } #cssmenu > ul > li { cursor: pointer; background: #a6a6a6; border-bottom: 1px solid #dedede; } #cssmenu > ul > li:last-child { border-bottom: 1px solid #dedede; } #cssmenu > ul > li > a { display: block; color: #ffffff; background: #a6a6a6; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { background: #a9d669; color: #ffffff; } #cssmenu > ul > li.has-sub > a:after { content: ''; position: absolute; top: 10px; right: 10px; border: 5px solid transparent; border-left: 5px solid #ffffff; } #cssmenu > ul > li.has-sub.active > a:after { right: 14px; top: 12px; border: 5px solid transparent; border-top: 5px solid #4e5800; } /* Sub menu */ #cssmenu ul ul { padding: 0; display: none; } #cssmenu ul ul a { background: #efefef; display: block; color: #797979; font-size: 13px; } #cssmenu ul ul a:hover { color: #000000; background: #dedede; } #cssmenu ul ul li { border-bottom: 0px solid #f1f1f1; } #cssmenu ul ul li:last-child { border: none; } </style>