Steps to toggle the visibility of a table by clicking on a plus or minus button

//Custom Table Display Script using JQuery
 $(document).ready(function(){
            $('.table1').on('click',function(){

                $('.table1shw').show();

            });
            
        });
        
        
//Attempted another method to display the table but failed 
document.getElementById('sp1').addEventListener("click", function() {
  showTable('t1');
});


function showTable(table) {
  var tables = ['t1'];
  for (var i = 0; i < 4; i++) {
    document.getElementById(tables[i]).style.display = "none";
  }
  document.getElementById(table).style.display = "block";

}
.table-hide{
    display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-12 col-12 table-responsive">
                                <div class="form-group">
                                
                                    <div class="col-md-12" style="padding: 10px !important;" align="center">
                                        <div class="form-group">Main heading</div>
                                    </div>

                                    <table class="table table-hover">
                                        <thead class="lbbg3">
                                            <tr>
                                                <td style="width: 800px;">Sub heading 1</td>
                                                <td>Sub heading 2</td>
        
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th style="background: #eef7fc; text-align: left;" colspan="2"><button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></div> <button class="table-minus-btn"><i class="fa fa-minus"></button> Child Heading</th>

                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                   <div class="table1shw">  <table class="table1 table-hover table-hide" id="t1">                                    <tr>
                                                            <td style="text-align: left;width: 800px;">
                                                                Row 1
                                                            </td>
                                                            <td style="text-align: center;">
                                                                <div class="custom-control custom-radio radio-table">
                                                                    <a href="#doc"> <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn">
                                                                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label></a>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="text-align: left;width: 800px;">
                                                                Row 2
                                                            </td>
                                                            <td style="text-align: center;">
                                                                <div class="custom-control custom-radio radio-table ">
                                                                    <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy">
                                                                    <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table></div>
                                                  
                                                </td>
                                            </tr>
                                        </tbody>

                                    </table>
                                </div>
                            </div>

Hey there! I'm having trouble displaying the full table when clicking the plus button, and then hiding it when the minus button is clicked. I've tried two different methods but haven't had any success yet. Feeling a bit stuck here - can you point out where I might be going wrong? Your help would be greatly appreciated.

javascripthtmljquerycssbootstrap-4

Answer №1

The element you need to call .show() on is not correct.

I've made some updates to your code -

$(document).ready(function() {
  $("#t1").hide(); // hiding the table by default
  $('#sp1').on('click', function() {
    $("#t1").show();
  });
  $('#close').on('click', function() {
    $("#t1").hide();
  });
});
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 col-12 table-responsive">
  <div class="form-group">
    <div class="col-md-12" style="padding: 10px !important;" align="center">
      <div class="form-group">Main heading</div>
    </div>

    <table class="table table-hover">
      <thead class="lbbg3">
        <tr>
          <td style="width: 800px;">Sub heading 1</td>
          <td>Sub heading 2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="background: #eef7fc; text-align: left;" colspan="2">
            <button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
          </th>
        </tr>
        <tr>
          <td colspan="2">
            <div class="table1shw">
              <table class="table1 table-hover" id="t1">
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 1
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <a href="#doc">
                        <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 2
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
                      <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

The changes that have been made are -

$("#t1").hide(); - Hiding the table by default, using t1 as the table's id

Add a click handler on sp1, which is the id of the plus button, to show the table within the event -

$('#sp1').on('click', function() {
     $("#t1").show();
});

Finally, add a click handler on the close button with its id being close

$('#close').on('click', function() {
     $("#t1").hide();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align a collection of search bars with HTML and CSS?

Can someone help me align my search bars and submit buttons? I'm new to HTML and struggling with this task. (By the way, this is just a small part of the browser layout, it doesn't usually look so messy!) .center-block{ margin-top: 220px; ...

htmlcss

The jade code is causing an error to be displayed

The following Jade code seems to be malfunctioning. head script(src='http://d3js.org/d3.v3.min.js') script(src='http://dimplejs.org/dist/dimple.v2.1.0.min.js') body script(type='text/javascript') var svg ...

javascriptnode.jsexpresspug

Ways to retrieve an HTML form

I have designed an HTML form that submits data to addstuds.php for inserting records into a MySQL database. <form name="formcheck" method="post" action="addstuds.php"> <td width="30" height="35"><font size="3">*ID Number:</td> < ...

phpmysqlhtml

Issue with jQuery form submission not retrieving input value

[Beginner inquiry] I am using contact form 7 on my WordPress website. I have two input fields where I need to display the event title and price: if (window.location.href.indexOf("event") > -1) { var title = $('.entry-title').text(); var ...

jqueryhtmlformsinput

The top-center alignment in Toaster (ngx-toastr) is missing a top margin

I recently started using the ngx-toastr library in my project. I have a message service that displays error messages at the top-center of the screen with the following code: @Injectable() export class MessageService { constructor(private toastrServic ...

htmlcssangulartypescriptngx-toastr

What are some techniques to enhance images post cropping with PHP?

Currently, I am utilizing the plugin for image cropping. The functionality works as intended where I can crop an image and then insert it into both my folder and database. However, there is an issue concerning the varying file sizes of the cropped images ...

phpjqueryimageoptimizationimage-resizing

The ReCaptcha and AJAX Integration

I am attempting to display the ReCaptcha image using its AJAX API. I have been following the instructions from this documentation and observing the behavior of this demo. Despite my efforts, I am still unable to create a functional fiddle. I have added jsf ...

javascriptjqueryajaxrecaptcha

Transfer properties to the children of this component

I'm a beginner with React and facing an issue when trying to pass custom props to this.props.children. I attempted using React.cloneElement, and while I can see the prop in the console.log within the class where I created it, it seems to get lost duri ...

javascriptreactjsreduxreact-router-v4react-router-dom

What could be causing this Ajax request to come back with an error?

I am facing an issue with an AJAX request to a WordPress PHP function. The strange part is that the response is being treated as an error. However, when I check the error log, the responseText contains the requested JSON data, the status is 200, and statu ...

phpjqueryajaxwordpress

Detecting key press events with extended duration using the DOM keydown event

Is there a way to receive notification when a key is pressed down, but not until it is released? It seems that using keydown continuously triggers the onkeydown callback while the key is held down. ...

htmldomw3c

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

javascripthtmlcssangularsvg

The display of table headers varies in IE7

I am experiencing an issue with a table that has headers, each containing a span element with a background image serving as a separator between the column headers. While the display looks correct on most browsers, on IE7 the separator image (which is with ...

htmlcssinternet-explorer-7

Issue with Three.js: The mouse hover effect does not revert back to the previous color

Currently, I am working on creating a pattern using Three.js. The goal is to change the color of a face to gray when the user hovers over it with the mouse, and then revert it back to its original light blue color when the mouse moves away. Unfortunately, ...

javascriptthree.js

come back through the span of choices

I am currently working on a small school project that involves selecting a casino from a database and displaying the chosen name in a span element. The PHP code retrieves the list of casinos from the database and populates a select menu, while the jQuery f ...

phpjquery

Error: JQuery's on() function is not defined

After modifying the code in the original and changed code boxes, I'm now encountering an Uncaught Type error: Undefined is not a function. Any thoughts on why this might be happening? Thanks Original: $('.comment').click(function(e){ ...

javascriptjqueryajaxhide

Error in CSS Header - Position Shifts when Hovered Over

UPDATED HEADER HTML/CSS I am currently working on the header section of my website at . I encountered a bug where, upon hovering over the links in the header from right to left, the positions of the links become disorganized. I am unsure of what might be ...

jqueryhtmlcss

What is the best way to arrange the elements of an array based on a specified value?

Is there a way to develop a function that can organize an array of data based on the value of a specified field? Suppose the field consists of three numbers: 1, 2, 3. The idea is that upon providing a certain value to the function, it will rearrange the ta ...

javascriptarraysvue.jsvuejs3

Populate Select2 with default value using knockout.js

I'm working on a Knockout.js web application that includes a select2 dropdown. My goal is to bind both the id and text values to a variable, not just the id itself. Here's the data I'm working with: var vehicles = [{id: 1, type: 'Car&a ...

htmlselectknockout.jsjquery-select2dropdown

obtaining social media shares on Facebook through JavaScript

Below is the code I have written: function retrieveShareCount(url){ var count; $.ajax({ type: "GET", url: "http://api.facebook.com/method/fql.query?query=SELECT+share_count+FROM+link_stat+WHERE+url%3D%22http%3A%2F%2F9gag.com%2Fgag% ...

javascriptxmlfacebookjquery

Troubleshooting: Why Your Angular Data Binding is Failing

I am integrating a WCF REST service with an AngularJS application. My goal is to retrieve account information based on the account number provided, however, I am encountering an issue where the text "Account_Type" is displayed three times before showing th ...

javascriptangularjslinqwcf