Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery.

Please see below for a snippet of the code.

//custom JS to add
$("#choice").change(function() {
  $("#table tbody tr").hide();
  $("#table tbody tr." + $(this).val()).show('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option>Choose...</option>
  <option value="1Year">1 Year</option>
  <option value="1.25Years">1 Year 3 Months</option>
  <option value="1.5Years">1 Year 6 Months</option>
  <option value="2Years">2 Years</option>
</select>

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>



  <tbody id="1Year">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="1.25Years">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="1.5Years">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

I aim to display the initial six months of content from the calculator and allow users to view additional years by selecting an option from the dropdown menu.

Your assistance is greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

  • To start, make sure you are hiding the tbody and not trs

  • Ensure that the ID has no special characters and starts with a letter or underscore for easier jQuery manipulation

  • Since IDs must be unique, direct access is possible

  • An ID on the table is required for #table tbody to work

  • Add a blank value option

  • Selected attribute added to 1year in order to trigger change on load to display only the first tbody

  • t2Years also added to the table

//Custom JS code
$("#choice").on("change",function() {
  $("#table>tbody").hide();
  if (this.value) $("#t" + this.value).show('fast');
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option value="">Choose...</option>
  <option selected value="1Year">1 Year</option>
  <option value="1_25Years">1 Year 3 Months</option>
  <option value="1_5Years">1 Year 6 Months</option>
  <option value="2Years">2 Years</option>
</select>

<table id="table">
  <thead>
    <tr>
      <th>Table header</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>



  <tbody id="t1Year">
    <tr>
      <td>1 year</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="t1_25Years">
    <tr>
      <td>1.25</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="t1_5Years">
    <tr>
      <td>1.5</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  <tbody id="t2Years">
    <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer №2

--------- CONTENT REMOVED (Not accurate :P) ------

An ID or class cannot begin with a number. For example, 1Year should be modified to Year1. Additionally, you cannot include . in a class or id. Change 1.25Years to Years1-25.

------ CONTENT REMOVED ------

Note about redaction: HTML5 now permits numbers at the start of classes and ids. Periods are also allowed in ids, but remember to escape the period in your CSS. For instance: #1\.25Years

Specific Issue with Code

Your jQuery selector was targeting an element with the id of table rather than the actual table itself. Moreover, instead of selecting a tr with a class matching the selected options value, you should select the id of the tbody. I have made the necessary adjustments to select the table and the id of the tbody correctly.

//Below is our custom JS to add
$("#choice").change(function() {
  $("table tbody").hide();
  $("table tbody#" + $(this).val()).show('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option>Choose...</option>
  <option value="Year1">1 Year</option>
  <option value="Years1-25">1 Year 3 Months</option>
  <option value="Years1-5">1 Year 6 Months</option>
  <option value="Years2">2 Years</option>
</select>

<table id="table">
  <thead>
    <tr>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
      <th>hello</th>
    </tr>
  </thead>

  <tbody id="Year1">
    <tr>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
    </tr>
    <tr>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
      <td>Year1</td>
    </tr>
  </tbody>

  <tbody id="Years1-25">
    <tr>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
    </tr>
    <tr>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
      <td>Years1-25</td>
    </tr>
  </tbody>

  <tbody id="Years1-5">
    <tr>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
    </tr>
    <tr>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
      <td>Years1-5</td>
    </tr>
  </tbody>
  
  <tbody id="Years2">
    <tr>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
    </tr>
    <tr>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
      <td>Years2</td>
    </tr>
  </tbody>
</table>

Answer №3

I have just found the ultimate solution to the problem stated above. When users access the page, they will encounter a header along with some data rows that will always be visible (grouped under the thead section). Initially, upon loading the page, the selection will default to 'Choose' (resulting in no tbody groups being displayed) and users can expand the data by choosing an option from the dropdown menu at the top. The tbody groups will then appear below the permanent rows.

A huge thank you to all the contributors for their valuable input!

Check out the final code snippet provided below:

// This is the custom JS code we want to include
$("#choice").on("change",function() {
  $("#table>tbody").hide();
  if (this.value) $("#t" + this.value).show('fast');
}).change();
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option selected value="">Choose...</option>
  <option value="1Year">1 Year</option>
  <option value="1_25Years">1 Year 3 Months</option>
  <option value="1_5Years">1 Year 6 Months</option>
  <option value="2Years">2 Years</option>
</select>

<table id="table">
  <thead>
    <tr>
      <th>Table header</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Permanent row 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Permanent row 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </thead>



  <tbody id="t1Year">
    <tr>
      <td>1 year</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="t1_25Years">
    <tr>
      <td>1.25</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="t1_5Years">
    <tr>
      <td>1.5</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  <tbody id="t2Years">
    <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>

Answer №4

I have conducted extensive research and devised the following solution.

Review the code snippet below:

//custom JS to be added
$(document).ready(function(){
   $('tbody').hide();
  
$("#choice").change(function() {
  $("table>tbody").hide();
  $("table>tbody#" + $(this).val()).show('fast');
});
});
     <html>
    <body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="choice">
      <option selected value="">Choose...</option>
      <option value="Year1">1 Year</option>
      <option value="Years1-25">1 Year 3 Months</option>
      <option value="Years1-5">1 Year 6 Months</option>
      <option value="Years2">2 Years</option>
    </select>

    <table id="table">
      <thead>
        <tr>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
          <th>hello</th>
        </tr>
     <tr>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
          <td>Permanentrow1</td>
        </tr> 
    <tr>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
          <td>Permanentrow2</td>
        </tr>   
      </thead>

      <tbody id="Year1">
        <tr>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
        </tr>
        <tr>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
          <td>Year1</td>
        </tr>
      </tbody>

      <tbody id="Years1-25">
        <tr>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
        </tr>
        <tr>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
          <td>Years1-25</td>
        </tr>
      </tbody>

      <tbody id="Years1-5">
        <tr>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
        </tr>
        <tr>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
          <td>Years1-5</td>
        </tr>
      </tbody>
      
      <tbody id="Years2">
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        <tr>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
          <td>Years2</td>
        </tr>
        
        
      </tbody>
    </table>

    
    </body>
    </html>

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

Sending form array information using jQuery AJAX

My form allows for the addition of multiple listings simultaneously. Additionally, there is a requirement to pass through an md5check. For example: <select name="master_id"></select> <select name="id2[]"></select> <select nam ...

phphtmljquery

Having difficulty assigning a JSON key value to a variable

I am encountering an issue where I keep receiving '[object HTMLParagraphElement]' instead of the ID value that I expected. The desired output should resemble this: I attempted to store the console.log output in a variable, but my attempts were ...

javascriptjqueryjson

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

Different ways to style this form using only CSS

Consider the HTML code below: <form> <p> <label for="id_name">Name:</label> <input id="id_name" maxlength="40" name="name" type="text"> </p> <p> <label for="id_format">Fo ...

htmlcss

Utilizing Intel's App-Framework for Dynamic JSON Data Presentation

Can someone provide guidance on how to properly display JSON data retrieved from PHP within an Intel App Framework application? I've attempted using both the .getJSON() and .getJSONP() methods but would appreciate a comprehensive guide on their usage. ...

androidjquerycross-platformappframework

Guide on setting up a shortcut key for an input field

Currently, I have a collection of images each with its own HTML page. I added an input button that when clicked, takes you to the next image. However, I would like to enhance user experience by allowing them to use keyboard arrows for navigation. Being new ...

htmljquerybuttonkeyboard-shortcutshotkeys

A more concise code for dynamically changing content using if-else conditions

I have a dataLayer created by a specific system and I am looking for a more efficient way to change the content of my webpage based on values in the dataLayer. Currently, I have implemented a conditional if else statement using jQuery which does work, bu ...

jquery

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

"Using jQuery to prevent propagation from interfering with an ajax GET request

I'm facing an issue with a table that has clickable rows and ajax links in the rightmost column. Whenever I click on the link within a row, the row's click event is triggered as well. To prevent the event propagation, I tried using stopPropagati ...

javascriptjqueryajaxasp.net-mvc

What is the best way to send data using ajax?

I'm looking to send variables from post.php to addcomment.php using an AJAX request. I've attempted the code below, but it's not functioning as expected. The page reloads, but no changes occur, and there's no data being added to the dat ...

phpjqueryajax

Issue with Google Chrome not showing stylesheets on Windows 7

Recently, I've been facing an issue with CSS layers on my website while using Google Chrome. Despite following the code accurately, my browser fails to display the expected result. To troubleshoot, I even copied and pasted code from a reliable source ...

htmlcssgoogle-chrome

Adjust the color of a DIV based on the text value retrieved from an external source

I am looking to dynamically change the text color between red and green based on a numeric value received from an external source (API). If the value is greater than or equal to 50, it should be displayed in red. If it's less than 50, then it should ...

javascripthtmlcsscolors

Lack of Ajax query string parameters

To implement a functionality where clicking on a delete button in the UI triggers a service method that retrieves data from a database and displays it in a popup, I need to call a specific method in an Action class. The task id and command name (method nam ...

javascriptajaxstruts-1

What is the formula to determine the precise hue-rotate needed for producing a particular shade?

I'm looking to change the color of a white background image in a div to match the main theme color. I know I can use filters like sepia(), saturate(10000%), and hue-rotate() to achieve this, but is there a way to calculate these values beforehand? Sin ...

htmlcsssvgsvg-filterscss-filters

Is there a way to streamline and optimize this React/Material UI code for faster performance?

There seems to be a lot of repetition in the code that needs to be cleaned up. I'm wondering if the switch statement is necessary. It looks like it requires the muiTheme palette to be passed this way. Also, can these theme constants be placed in a sep ...

javascriptreactjsdrymaterial-ui

Expand the div to fit one side of the browser

My bootstrap code looks like this: <div class="container"> <div class="row"> <div class="col-md-8">content</div> <div class="col-md-4"> <div class="map">map goes here</div> </div> </div& ...

htmlcsstwitter-bootstrap

Issue: Unable to assign null value to a boolean property in the bean

I have a boolean variable in my bean that needs to be set to true or false depending on the user's selection of radio buttons. I am incorporating JSF radio buttons into two separate columns within the same row of a JSF datatable. It is a requirement ...

jqueryjsfdatatableradio-button

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

phpcsswordpressthemeswordpress-theming

Sometimes, Jquery UI can cause certain browsers to freeze or hang

I am facing an issue with my web page that consists solely of HTML, CSS, full JavaScript with jQuery, and some jQuery UI effects. The problem arises when certain animations are applied to specific areas of the page, causing it to hang on Chrome 13 and Expl ...

jqueryjquery-ui