Press a single button to toggle between displaying and hiding the table

$(document).ready(function() {
  $("#t1").hide(); // hide table by default
  $('#sp1').on('click', function() {
    $("#t1").show();
  });
  $('#close').on('click', function() {
    $("#t1").hide();
  });
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.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>

Hey there! I'm currently working with a plus and minus button setup where only one button should be displayed at a time. Clicking the plus button reveals a hidden table, while the minus button appears and the plus button hides. It's essentially a toggle button situation, and I'm also looking into displaying only one hidden table at a time.

All my code and table functionalities are running smoothly as I've implemented this accordion-like method successfully before, but now adapting it for tables.

javascripthtmlcssbootstrap-4

Answer №1

Additionally, you have the option to condense it a bit

$(document).ready(function() {
  $("#t1, #close").hide();
  $('#sp1, #close').on('click', function() {
    $('#t1, .table-plus-btn, .table-minus-btn').toggle();
  });
});

Answer №2

You have the option to toggle buttons based on a click event. There is a function called toggleButtons(show) where you can specify whether you want to show or hide the row.

function toggleButtons(show) {
      if (show) {
        $("#sp1").hide();
        $("#close").show();
      } else {
        $("#sp1").show();
        $("#close").hide();
      }
  }


$(document).ready(function() {
  $("#t1").hide(); // Default: Hide table
  $('#sp1').on('click', function() {
    toggleButtons(true)
    $("#t1").show();
  });
  $('#close').on('click', function() {
    toggleButtons(false)
    $("#t1").hide();
  });
  
  
  function toggleButtons(show) {
      if (show) {
        $("#sp1").hide();
        $("#close").show();
      } else {
        $("#sp1").show();
        $("#close").hide();
      }
  }
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.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" style="display: none"><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>

Answer №3

It appears that the desired functionality is as follows: First - The plus button should be displayed, while the table remains hidden. Second - Upon clicking the plus button, the table is shown, the plus button is hidden, and the minus button is displayed. Third- Clicking on the minus button will hide the table, show the plus button again, and hide the minus button.

The issue with the code seems to be related to the timing of hiding/displaying the buttons. It is assumed that only one button should be visible at a time?

$(document).ready(function() {
        $("#t1").hide(); // default hide for the table
        $("#close").hide(); // hide the minus button if only one button should be displayed
        
  $('#sp1').on('click', function() { // action when plus button is clicked
    $("#t1").show(); 
    $("#sp1").hide(); // hide the plus button
    $("#close").show(); // display the minus button
  });
  $('#close').on('click', function() { 
    $("#t1").hide(); // hide the table
    $("#close").hide(); // hide the minus button
    $("#sp1").show(); // show the plus button
  });
});

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

angular2 angular-entity directive

I have developed a component that accepts a template: export class TemplateParamComponent implements OnInit { @Input() items: Array<any>; @Input() template: TemplateRef<any>; } Here is the HTML code: <template #defaultTemplate le ...

javascriptangular

Looking for a way to extract information from two nested objects within an array by utilizing lodash, and then transferring it as a property to a react component

My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...

javascriptarraysreactjsreact-props

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

The function getComputedStyle(elem).getPropertyValue('fontSize') returns incorrect values when the font size of the element is specified in em units

My current issue involves trying to obtain the font size of an element in the following manner: getComputedStyle(MyTargetElement , "").getPropertyValue('font-size') The result is coming back as 16px, when it should actually be 14px. W ...

javascriptcssreactjs

Find the smallest number within an array without relying on the Math function

Could someone assist me in creating a function that finds the lowest number in an array? I've been struggling with this and previous answers on similar questions didn't really help as they presented solutions with unfamiliar code. The current cod ...

javascript

I'm having trouble getting the modal to load automatically when the page loads. The usual bootstrap method doesn't seem to be working, and I'm

Trying to make a modal load on page load seems like a simple task, but for some reason, it just won't work! It functions perfectly fine when triggered by a click. The bootstrap and jquery scripts are included as shown below: <script src="https:/ ...

jquerybootstrap-4

Guide to Binding a JSON Property (Set or Array) to an Interactive Input Form in AngularJS

My input form is structured like this: <div> <div class="form-group"> <label for="inputQuestion" class="col-sm-2 control-label">Question</label> <div class="col-sm-10"> <input data-ng-model="publication.qu ...

javascriptangularjsdata-bindingangularjs-ng-model

Issue with FullPage.js scrollOverflow feature not properly accommodating loaded content

I am currently working on a full-page website and have opted to utilize the Fullpage.js plugin. However, I seem to be facing some challenges when it comes to loading content through an AJAX request. The pages are being populated with JSON content, but for ...

javascriptjqueryajaxfullpage.jsslimscroll

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Trouble with implementing Ajax in Express and jquery

My app has a browse page where users can add items as owned or wanted. Currently, when adding an item it redirects back to the general /browse page. However, I want the page to not refresh at all. I'm attempting to achieve this with ajax, but as a beg ...

javascriptjqueryajaxexpress

The information returned to the callback function in Angular comes back null

In my Node.js application, I have set up an endpoint like this: usersRoute.get('/get', function(req, res) { //If no date was passed in - just use today's date var date = req.query.date || dateFormat(new Date(), 'yyyy-mm-dd&ap ...

javascriptangularjsnode.jsasynchronous

Transform the text area in preparation for a GET request

Trying to figure out how to pass the text from a textarea into the source attribute of an image tag while retaining all formatting, including line breaks. After some research, it seems that the best way to accomplish this is by base 64 encoding the text a ...

javascriptajax

The issue arises when the ng-hide directive fails to function properly due to the presence of a custom directive with the terminal option

Below is the code for my button: <button ng-hide="todo === 'add'" confirm-click ng-click="delete()">Delete</button> This is the directive implementation: (function(app) { app.directive('confirmClick', function(){ ...

htmlangularjsangularjs-directiveng-hide

Angular reactive form encountered an issue with an incorrect date being passed

Currently, I am utilizing the PrimeNg calendar module to select a date. Here is the code snippet: <p-calendar formControlName="valid_till" [dateFormat]="'mm/dd/yy'"></p-calendar> Upon selecting a date like 31st J ...

javascriptangulardateprimeng

What is the best way to reset local state after triggering a success action in Redux Saga?

I'm looking to reset my component state after a successful call in redux saga. Is there a way to achieve this? Currently, I am using the component state to track my input value. this.state = { department: '', }; The solution I have im ...

javascriptreactjsredux-saga

Occasionally, the function `Element.getElementByTag("mytag")` may come up empty

Here is the outer html of Element1 in CKeditor: <element1 id="s1"> <mytag>Test1</mytag> <span> </span> Some text <mytag>Test</mytag> <span> </span> <mytag>Test3</mytag> some text <span&g ...

javascriptjqueryfindckeditornodes

Guideline on extracting private keys from Windows Certificate Manager

I am currently working in a Windows environment setting. Within my organization, we act as our own certificate authority for internally-used https applications. I have obtained a certificate from our system for a private web server I created. While using ...

javascriptnode.jssslhttpspki

Ensuring the server application is up and running before initiating the mocha tests

This is similar to Ensuring Express App is running before each Mocha Test , but the proposed solution isn't effective + I am utilizing a websocket server In essence, I'm making use of a websocket framework called socketcluster and this represent ...

javascriptnode.jsexpressmocha.js

Newbie's Dilemma: Issues with Html, Email, and Distribution Lists

I am looking to add a new feature to my website where users can enter their email address to receive a free promotion and be added to an announcement list. Since I don't have any experience with web programming, I'm not sure where to start. Would ...

htmldatabase