Can you assist me with this issue?
I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list.
Here is an image showing the current problem:
https://i.sstatic.net/DS7hO.png
And here is a picture of the expected outcome:
https://i.sstatic.net/aWsUh.png
For reference, here is the Fiddle link: https://jsfiddle.net/g825e2o2/
CSS Markup:
<style type="text/css>
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select dd, .select dt, .select ul {
margin: 0px;
padding: 0px;
}
/* CSS styling continues... */
</code></pre>
<p>The remaining HTML code:</p>
<pre><code><script type="text/javascript">
$(document).ready(function() {
$(".select dt a").click(function() {
var select = $(this).closest('.select');
select.find('ul').toggle();
});
/* JavaScript functions continue... */
});
</script>
</head>
<body>
<dl id="reqtype" class="select">Fruits
<dt><a href="#"><span data-val=""></span></a></dt>
<dd>
<ul>
<li><a data-val="" href="#"> </a></li>
<span class="header-list">- List -</span>
<li><a data-val="apples" href="#">Apples</a></li>
<li><a data-val="Bananas" href="#">Bananas</a></li>
<li><a data-val="Oranges" href="#">Oranges</a></li>
</ul>
</dd>
</dl>
<br><br>
<dl id="action" class="select">Status
<dt><a href="#"><span data-val=""></span></a></dt>
<dd>
<ul>
<li><a data-val="" href="#"> </a></li>
<li><a data-val="ACTIVE" href="#">ACTIVE</a></li>
<li><a data-val="ON HOLD" href="#">ON HOLD</a></li>
<li><a data-val="CLOSED" href="#">CLOSED</a></li>
</ul>
</dd>
</dl>
</body>
</html>