Show and hide target element on click button using javascript/jquery

Created at 05-Jul-2021 , By samar

Show and hide target element on click button using javascript/jquery

Through the use of the programming language, we will work together to solve the "Show and hide target element on click button using javascript/jquery" puzzle in this lesson.

You can show and hide the target element on the click button using javascript/jquery.
  • Show and hide target element in jQuery

    <button type="button" onclick="toggleElement('targetDiv'); return false;">  Toggle Button </button>
    <div id="targetDiv"> Html element to toggle </div>
    
    <script>
    function toggleElement(element){
        $('#'+element).toggle();
    }
    </script>
    

    You have to call the onclick method on the button using the target element id. This function can be used for multiple buttons with their target elements. JQuery provides a toggle method to hide and show the target element which is to show the element if it is hidden and hide the element if it is already shown in your HTML.

Back to code snippet queries related jquery

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.