Facing to hide and show

sankeerth m

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"; });

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari5y ago
Use simple html without any js. It works perfectly.

Details and summary (
and
)

Details
tag is used to show additional details based on demands. This can be considered as a simple accordion or collapsible which can be achieved with simple tag. The
tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Whereas summary defines a visible heading for details and is used a first child under details.

Sample:
Details and summary

This can consider as a simple accordion or collapsible which can be achieved with simple tag.
Live preview
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_summary
+3
Satya Karki5y ago
Try this:
Give Id as below:
<a href="#" id="lnplus" 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="#" id="lnminus" 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>
To show and hide simple write
document.getElementById('lnplus').style.visibility = 'visible'
or
document.getElementById('lnplus').style.visibility = 'hidden'

sample for your code:
$("#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'; });
+2
Salman Beg5y ago
Hey. First give id to your href tag and then follow this link which explains how to hide or show it, https://www.codeproject.com/Questions/234812/How-can-i-hide-a-anchor-tag-in-html
+1
Kiran Mohanty5y ago
do you have any element with class "lnplus" or "lnminus" ?
+1