Facing to hide and show

Question

<a href="#" class="btn btn-header-link collapsed" onclick="lnplus();" align="right" data-toggle="collapse" data-target="#faq2" aria-expanded="true" aria-controls="faq2" style="color:white;font-weight: bolder;padding-left:550px"> <span class="glyphicon glyphicon-plus"></span> </a>

<a href="#" class="btn btn-header-link collapsed" align="right" onclick="lnminus();" data-toggle="collapse" data-target="#faq2" aria-expanded="true" aria-controls="faq2" style="color:white;font-weight: bolder;padding-left:550px;display:none"> <span class="glyphicon glyphicon-plus"></span> </a>

trying to hide and show but unable to get please help me out.

$("#lnplus").on('click', function (event) { event.preventDefault(); document.getElementById(".lnminus").style.visibility = "hidden"; document.getElementById(".lnplus").style.visibility = "visible"; }); $("#lnminus").on('click', function (event) { event.preventDefault(); document.getElementById(".lnplus").style.display = "visible"; document.getElementById(".lnminus").style.display = "hidden"; });