Hide side navbar's <hr> element on adding active class to <a>

Question

i have a side navbar in which each anchor tag has a separate <hr> . I am adding a active class when user clicks on a link, which I have done successfully. But I want to hide the <hr> of the anchor tag that has the active class. The problem is once I hide the hr on active class I can't show it back when another <a> is active.

<a href="" id="menu">Menu</a>
<a href="landing.php"><i class="fas fa-home"></i>&nbsp&nbsp <strong>Home</strong><hr></a>
<a href="#"><i class="fas fa-chart-bar"></i>&nbsp&nbsp <strong>Report</strong><hr></a>
<a href="#"><i class="fas fa-money-bill-alt"></i>&nbsp <strong>Transaction</strong><hr></a>
<a href="#"><i class="fas fa-address-book"></i>&nbsp&nbsp <strong>Account Master</strong><hr></a>
<a href="#"><i class="fas fa-key"></i></i>&nbsp&nbsp <strong>Change Password</strong><hr></a>
<a href="#"><i class="fas fa-cogs"></i></i>&nbsp&nbsp <strong>Financial Year</strong><hr></a>
<a href="#"><i class="fas fa-sign-out-alt"></i></i>&nbsp&nbsp <strong>Logout</strong><hr></a>

jquery is:

$(this).addClass("menuActive").siblings().removeClass("menuActive");
$(this).find("hr").hide().siblings().find("hr").show();

As I have shown in the image when I click other <a> the <hr> of Report remains hidden.

Answer 1

This would be easier with a CSS rule:

a.menuActive hr {display:none}

Now all you need to manipulate in javascript is the menuActive class; the hr will appear and disappear on its own.

$(this).addClass("menuActive").siblings().removeClass("menuActive");

Answer 2

Try display:none and display:block instead of show and hide like this:

$("#id").css("display", "none");
$("#id").css("display", "block");