Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Reusable jQuery function to show or hide element

With following code sample, you can show or hide element by element id.

  • Pass following parameter to function
  • A Boolean flag, true for show and false for hide element
  • Your html element unique id

Code example

function showHideHtmlElement(toShow,elementId) {
    if (toShow) {
        if ($(elementId).is(":hidden")) {
            $(elementId).show();
        }
    }
    else {
        if ($(elementId).is(":visible")) {
            $(elementId).hide();
        }
    }
}
 

Check if an element contains a specific class or has specific class

jQuery hasClass() Function

Determine whether any of the matched elements are assigned the given class.

The .hasClass() method will return true if the class is assigned to an element, even if other classes also are. For example, given the HTML below, the following will hide details section if element has class author-list-show.

Code example

if ($("#Cs4uAuthListSection").length) {
     if ($("#Cs4uAuthoorsSection").hasClass("author-list-show")) {
        //Code to hide user details tab section
 
      }
  }