CODEWITHSUNDEEP
c#jquerycsssvgshow-hide
Newbee
Newbee

Reputation: 31

Jquery hide/ show svg images

[enter image description here][1]Help! I have two svg image buttons on my page. On the page load I am displaying one of the two buttons based on the value in the DB . and I have jquery to hide that button and show another one on button click from UI. I cannot show another button after hide.

both buttons are in a single span class.

Upvotes: 1

Views: 826

Answers (2)

Newbee
Newbee

Reputation: 31

I figured it out. My back end code was using property btnXX.Visible = false, Changing it to display:none fixed my issue.

If you don't want to render the control at all in certain situations, set Visible="false". Since it keeps the control's HTML out of the page, slightly but if you want to show the control via Ajax/etc, this won't work and display:none css should be used

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The visibility property can't be block. You should use visible instead.

Have a look at the documentation for more about this property.

EDIT
If that can help... Here is an example showing both hidden and visible for the visibility attribute...

// That is executed on load.
$("#btnXX").css("visibility", "visible"); 
$("#btnYY").css("visibility", "hidden");

// Handler for the toggle button.
$("#toggle").on("click", function(){
  $(this).toggleClass("active");
  if($(this).hasClass("active")){
    $("#btnXX").css("visibility", "hidden"); 
    $("#btnYY").css("visibility", "visible");
  }else{
    $("#btnXX").css("visibility", "visible"); 
    $("#btnYY").css("visibility", "hidden");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnXX">XX</button><button id="btnYY">YY</button><br>
<br>
<button id="toggle">Toggle it</button>

Upvotes: 1

Related Questions