I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
    

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
                    body {
                        background-color: #3e94ec;
                        font-family: "Roboto", helvetica, arial, sans-serif;
                        font-size: 16px;
                        font-weight: 400;
                        text-rendering: optimizeLegibility;
                    }

                    div.table-title {
                        display: block;
                        margin: auto;
                        max-width: 600px;
                        padding: 5px;
                        width: 100%;
                    }

                    .table-title h3 {
                        color: #fafafa;
                        font-size: 30px;
                        font-weight: 400;
                        font-style: normal;
                        font-family: "Roboto", helvetica, arial, sans-serif;
                        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
                        text-transform: uppercase;
                    }

                    /*** Table Styles ***/
                    .table-fill {
                        background: white;
                        border-radius: 3px;
                        border-collapse: collapse;
                        height: 320px;
                        margin: auto;
                        max-width: 600px;
                        padding: 5px;
                        width: 100%;
                        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                        animation: float 5s infinite;
                    }

                    th {
                        color: #D5DDE5;
                        ;
                        background: #1b1e24;
                        border-bottom: 4px solid #9ea7af;
                        border-right: 1px solid #343a45;
                        font-size: 23px;
                        font-weight: 100;
                        padding: 24px;
                        text-align: left;
                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                        vertical-align: middle;
                    }

                    th:first-child {
                        border-top-left-radius: 3px;
                    }
                    
                    ... (content continues)
                
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Table Style</title>
  <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
  <link rel="stylesheet" type="text/css" href="stylesss.css">


</head>

<body>
  <div class="table-title"></div>
  <table class="table-fill table table-hover">
    <thead>
      <tr>
        <th class="text-left">items</th>
        <th class="text-left">calories</th>
      </tr>
    </thead>
  </table>

  <table class="table-fill table table-hover">
    <tbody class="table-hover">
      <tr class="header">
        <th colspan="2">
          Bread,cakes and biscuits
        </th>
      </tr>
      
      ... (content continues)

    </tbody>
  </table>
</body>

</html>

body {
    background-color: #3e94ec;
    font-family: "Roboto", helvetica, arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

... (more CSS code continued)
javascripthtmlcssbootstrap-4html-table

Answer №1

Live Gif:

demo: http://jsfiddle.net/xb6gfowL/1/

code:

 <!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

... (additional code continues)

      $("tr").find("th").on("click", function() {
        $(this).closest("table").find("tbody").toggle(); //you can set delay within toggle as well, like .toggle(500);
      });
    </script>
  </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

When the width is set to 100vh, there is excessive white space beneath the div

I'm dealing with a unique situation where I have a horizontal scrollable div containing different elements. To achieve the horizontal scroll, I've set the width: 100vh and rotated the div. However, this is causing an unwanted white space below th ...

htmlcss

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

javascripthtmlcssuser-interface

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Angular ng-repeat encounters difficulty in parsing Arabic object

As I create a JSON object that contains Arabic content shown below $scope.arabicContent = ["ردهة","قاعة الاجتماعات","مبرمجين الجوال","المدراء","المحاسبة","المحاسبة","المبرمجين‎","مطبخ‎ ...

javascriptangularjsangularjs-ng-repeat

Remove dynamically created elements from an AngularJS div

Is there a way to remove an item from the criteria list when clicking the delete button? Currently, only the filter is being refreshed and not the tables. Any suggestions on how to resolve this issue? HTML <ul class="list-unstyled"> <l ...

javascripthtmlangularjs

Is forwardRef not explicitly exported by React?

UPDATE: The issue with the code implementation below has been resolved. It was discovered that the error was caused by a react-redux upgrade, as redux now requires functional components instead of class components. import React, { forwardRef } from ' ...

javascriptreactjs

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

javascriptjqueryhtmllocal-storage

What's the best way to center align my tag vertically in this scenario?

I am struggling to center my text vertically in this scenario. Here is the structure I have: <section id='container'> <div id='title'> <h1>Title here.</h1> </div> </section> This ...

htmlcss

Upon loading the page, I encountered an issue with the 'errors' variable in my ejs template, resulting in an 'undefined' error

When I load my page, I encounter an 'undefined' error with my 'errors' variable in the ejs template. The ejs template I have is for a contact form and it includes code to display errors as flash messages on the page if the form is inco ...

javascriptnode.jsexpressejs

Google Maps does not support markers appearing on the map

I have created a basic web application that displays markers from a MySQL database on Google Maps using a table called markers_titik. In order to process this data, I have written a simple PHP script named map_process.php. Here is the code: <?php //PH ...

javascriptphpmysqlgoogle-mapsgoogle-maps-api-3

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title ...

javascriptjqueryhtmlcssdjango

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

javascripthtml

Is there a PHP script available to verify the status of FTP servers and determine if

I am in need of creating a PHP script that is triggered by a setInterval("ajaxrequest('ftp.php', 'context')", 1000) function. The PHP script itself is quite simple. It consists of an array containing FTP addresses. The script loops thro ...

phpjavascriptajax

Utilizing Jquery's fadeIn() function to make elements appear gradually on the webpage, whether

New Question: Is there a way to smoothly transition the visibility of a div element without using display:none or CSS, as these methods remove the div from view rather than simply hiding it, causing elements below to shift? If I try setting opacity:0 or v ...

jqueryhtmlcss

Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions: Here is the HTML code snippet: <div> &l ...

jqueryasp.netcssjqgrid

Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...

cssangularhtml-tablerepeat

Tips for utilizing the npm jQuery module effectively

What is the best way to import jquery into multiple modules in node? Should I make it a global variable, or should I use require('jquery') in each module that needs it? I encountered an error while attempting to utilize the package. TypeError: ...

javascriptjquerynode.jsnpm

What causes a neighboring div to change width when a multi-line span is present?

Here is my React code: <InfoWrapper> <InfoCircle> <span>i</span> </InfoCircle> <span className="info-label"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. elit. </span> </InfoWrap ...

htmlcssreactjsflexbox

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

javascripthtmlcss

Stop the submission of MVC Form

Using AJAX, I have a form with fields in a partial view that is sent to a controller action when submitted. The partial view appears in a pop-up div when a button on the main form is clicked. If the user completes and submits the form, the update is succes ...

javascriptc#jqueryajaxasp.net-mvc