Toggle Function with Button Onclick

Question

I had create a table with two method of toggle function, first toggle is toggle table row with its specific ID and second toggle is toggle all the table row. However, if i click on first toggle at first parent row, and then when i click on second toggle, the child of first parent will hide, where it suppose follow other parent show their child and then click again to hide the child. And if all child is shown, the image also should change from details_open.png become details_close.png

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="w3.css" rel="stylesheet" />

  <body>

    <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
        function toggle(thisname, image) {
          var path = image.src;
          var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];
          if (filename == 'details_open') {
            image.src = 'details_close.png';
          }
          if (filename == 'details_close') {
            image.src = 'details_open.png';
          }
          tr = document.getElementsByTagName('tr')
          for (i = 0; i < tr.length; i++) {
            if (tr[i].getAttribute(thisname)) {
              if (tr[i].style.display == 'none') {
                tr[i].style.display = '';
              } else {
                tr[i].style.display = 'none';
              }
            }
          }
        }



        $(function() {
          $('#btn').click(function(e) {
            e.preventDefault();
            $('.td1').toggle();
          });
        });
      </script>

      <input type="button" id="btn" style="color:red" name=btn value="Toggle Child Accessories">
      <table class="w3-table-all">
        <thead>
          <tr>
            <td onclick="toggle(1,open_1);">
              <center><img id="open_1" src="details_open.png" style="width:20px;cursor: pointer;"></center>
            </td>
            <td> A </td>
            <td> B </td>
          </tr>
        </thead>

        <thead>
          <tr 1=fred style='display:none;' class='td1' id='td1'>
            <td> </td>
            <td> C </td>
            <td> D </td>
          </tr>
        </thead>

        <thead>
          <tr>
            <td onclick="toggle(2,open_2);">
              <center><img id="open_2" src="details_open.png" style="width:20px;cursor: pointer;"></center>
            </td>
            <td> E </td>
            <td> F</td>
          </tr>
        </thead>

        <thead>
          <tr 2=fred style='display:none;' class='td1' id='td1'>
            <td> </td>
            <td> G </td>
            <td> H </td>
          </tr>
        </thead>
      </table>
    </body>

</html>

Dasten Duranin · Accepted Answer · 2018-08-08 09:29:35Z

1

If i understand correcly your need, you just need to control your rows's visibility to force toggle to hide or show all with his parameter display http://api.jquery.com/toggle/#toggle-display

$('#btn').click(function(e) {
    e.preventDefault();

    var display = true;

    if ($('.td1:visible').length == $('.td1').length) {
        display = false;
    }

    $('.td1').toggle(display);
});

https://codepen.io/anon/pen/xJymRr?editors=1010

I hope this will help you

answered Aug 8, 2018 at 9:29

Dasten Duranin

916 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ichida Over a year ago

May i know how can swap the image from details_open.png become details_close.png according to the child toggle?

Ichida Over a year ago

i try add some class in table and make changes in javascript part but it seen failed to swap the image codepen.io/wkt931029/pen/WKamXg

Dasten Duranin Over a year ago

Something was wrong in the selector codepen.io/anon/pen/vaVqLX?editors=1010

Afia · Accepted Answer · 2018-08-08 09:38:38Z

0

Since you are using jQuery, you can use jquery toggleClass()to swap the images using your css classes. jquery toggleClass. also noticed you have double <body> tag

answered Aug 8, 2018 at 9:38

Afia

6735 silver badges17 bronze badges

Collectives™ on Stack Overflow

Toggle Function with Button Onclick

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related