I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li>
<li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li>
<li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li>
<li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li>
<li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out
You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li>
<li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li>
<li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li>
<li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li>
<li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li>
</ul>
</div>
</li>
</ul>
</div>