Hide table when clicking

Question

Hide table when clicking

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

<script type="text/javascript">
  function showAndHide() {
    $('#tools_info').toggle(1700);
    return false;
  } 
<script>

<script type="text/javascript">
  function showAndHideTableGood() {
    if (this.id == "Btn_tgood") {
      $('#tgood').show().toggle("slow");
      $('#tbad').hide().toggle("slow");
    } else {
      $('#tgood').toggle("slow");
      return false;
    }
  } 
<script>

#tgood {
  width: 100%;
  display: none;
}

#tbad {
  width: 100%;
  display: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<button id="Btn_fch" onclick="showAndHide();" class="btn btn-primary" type="button">FCH </button>

<div id="tools_info" role="dialog">
  <div class="modal-dialog modal-sm" style="width: 450px">
    <div class="modal-content">
      <div class="modal-header">
        <h3><span class="glyphicon glyphicon-list-alt"></span>&nbsp Tools information</h3>
      </div>
      <div class="modal-header">
        <button id="Btn_tgood" class="btn-link" type="button" onclick="showAndHideTableGood();">Good condition</button>
        <button class="btn-link" type="button" onclick="showAndHideTableBad();">Bad condition</button>
      </div>
      <br />
      <table id="tgood">
        <tr style="text-align: center">
          <td>
            <asp:Button ID="Button7" runat="server" Text="501" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button8" runat="server" Text="502" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button9" runat="server" Text="503" CssClass="btn btn-primary btn-sm outline" />
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr style="text-align: center">
          <td>
            <asp:Button ID="Button10" runat="server" Text="504" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button11" runat="server" Text="505" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button1" runat="server" Text="506" CssClass="btn btn-primary btn-sm outline" />
          </td>
        </tr>
      </table>

      <table id="tbad">
        <tr style="text-align: center">
          <td>
            <asp:Button ID="Button3" runat="server" Text="601" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button5" runat="server" Text="602" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button12" runat="server" Text="603" CssClass="btn btn-primary btn-sm outline" />
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr style="text-align: center">
          <td>
            <asp:Button ID="Button13" runat="server" Text="604" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button14" runat="server" Text="605" CssClass="btn btn-primary btn-sm outline" />
          </td>
          <td>
            <asp:Button ID="Button15" runat="server" Text="606" CssClass="btn btn-primary btn-sm outline" />
          </td>
        </tr>
      </table>
      <br />
    </div>
  </div>
</div>

I have a function, which when I click on a button, it activates and shows a table, but when I want to close that table by clicking on the button again, this table is not hidden, it only has the effect of returning to show up.

this is the code of my function:

<script>
    function showAndHideTableGood() {
        if (this.id == "Btn_tgood") {
            $('#tgood').toggle("slow");
        } else {
            $('#tbad').show().toggle("slow");
            $('#tgood').hide().toggle("slow");
        }
    }
</script>

javascript asp.net

asked by Cesar Gutierrez Davalos 15.06.2017 в 16:59

source

3 answers

0

You have plenty of show/hide since it is made with toggle()

<script>
    function showAndHideTableGood() {
        if (this.id == "Btn_tgood") {
            $('#tgood').toggle("slow");
        } else {
            $('#tbad').toggle("slow");
            $('#tgood').toggle("slow");
        }
    }
</script>

answered by 15.06.2017 в 17:10

0

I leave an example here done in jquery, just change the labels and it's already

<button id="btn1">Ver/Ocultar</button>
<div id="div1" style="display:none">
    <img src="ejem.png" alt=""/>
    <p>Imagen de una carita</p>
</div>

<script type="text/javascript">

    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#div1").slideToggle(3000);
        });
    });

</script>

Adding the "toggle" will work perfectly.

answered by 15.06.2017 в 17:10

Generate PDF from stream Put a subtable in an HTML table - JQuery

score 0 · Accepted Answer

This is your current function

  function showAndHideTableGood() {
    if (this.id == "Btn_tgood") {
      $('#tgood').show().toggle("slow");
      $('#tbad').hide().toggle("slow");
    } else {
      $('#tgood').toggle("slow");
      return false;
    }
  }

I recommend you change it to the following:

fucntion showAndHideTableGood(){
   if(('#tgood').is(':visible')){  
     $('#tgood').hide();
     $('#tbad').hide();
   }else{
      $('#tgood').show();
     $('#tbad').show();
   }
}

Visible status looks for the css display:block , the function .hide() and .show() add the following code to the block HTML :

.show() sytle="display:block;"
.hide() style="display:none;"

If you have any questions, comment.

Luck.

Update

This is to avoid some runtimeException and it would also help to know which version of JQuery you are using.

$(document).ready(function(){
    fucntion showAndHideTableGood(){
       if(('#tgood').is(':visible')){  
         $('#tgood').hide();
         $('#tbad').hide();
       }else{
          $('#tgood').show();
         $('#tbad').show();
       }
    }
});

Update 2 It must be a conflict with JQuery, the system in which I use .is() is in version 3.1 but it does not say that it was depreciated in the documentation of 3.2

<script>
$m=jQuery.noConflict();
</script>
<script type="text/javascript">
    $m(document).ready(function () {
        fucntion showAndHideTableGood(){
   if(('#tgood').is(':visible')){  
     $('#tgood').hide();
     $('#tbad').hide();
   }else{
      $('#tgood').show();
     $('#tbad').show();
   }
}
    });
</script>