Question 182473 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make label and button vanish when triggered in jQuery/HTML form submission?

$(document).ready(function () {
    $("#show").click(function () {
        $("img:first").show();
    });
});

$(document).ready(function () {
    $("#hide").click(function () {
        $("img:first").hide();
    });
});

If the HIDE button is triggered i want the label and the HIDE button to vanished and vice versa. please help!

Tags:

2

Answers


  1. 0

    Please replace this {{your_image_path}} with your image.

    $(document).ready(function(){
  $("#hide").click(function(){
    $("img:first").hide();
    $(this).hide();
    $("#show").show();
  });
  $("#show").click(function(){
     $("img:first").show();
     $(this).hide();
     $("#hide").show();
  });
});
    <!DOCTYPE html>
<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 </head>
 <body>
   <img src="{{your_image_path}}" />
   <button id="hide">Hide</button>
   <button id="show">Show</button>
 </body>
</html>
    Login or Signup to reply.
  2. 0

    You can use a class on the label, image, and button to toggle the visibility of those elements. You can then use jQuery to add and remove classes from those elements.

    function showImage() {
  $("#image-wrapper").removeClass('hidden');
  $("#hide").removeClass('hidden');
  $("#show").addClass('hidden');
}

function hideImage() {
  $("#image-wrapper").addClass('hidden');
  $("#hide").addClass('hidden');
  $("#show").removeClass('hidden');
}

    <!DOCTYPE html>
<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 </head>
 <body>
   <div id='image-wrapper'>
     <img src="https://via.placeholder.com/350x150" />
     <span>Label for the image</span>
   </div>
   <button id="hide" onclick="hideImage()">Hide</button>
   <button id="show" onclick="showImage()">Show</button>
 </body>
</html>

    .hidden {
  display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search