Toggling specific paragraphs using jquery doesn't work

Question

I am trying to get jquery function to work on table rows. I am basing my solution on the following stack overflow question, however whenever I click on the expand link nothing seems to happen. I tried to debug the javascript code but it doesn't to reach it.

Here is the HTML code for reference:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>       td { white-space: pre }       p { display: none }   </style>   
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <script>
$("a[data-toggle]").on("click", function(e) {
       e.preventDefault();  // prevent navigating
       var selector = $(this).data("toggle");  // get corresponding element
       $("p").hide();
       $(selector).show();
   });   
   </script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
    <tr>
        <th class="confluenceTh"></th>
        <th class="confluenceTh">a1</th>
        <th class="confluenceTh">a2</th>
        <th class="confluenceTh">a3</th>
    </tr>
</thead>
<tbody>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>

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

Thanks!

@madalinivascu could you please post your solution so I can accept it? — jonatzin, Apr 17 '15 at 11:45

score 3 · Accepted Answer · edited May 23 '17 at 11:51

You have two options:

wrap the code in $(document).ready
place it after your body tag close at the bottom of the file (benefits)

Your code also had mismatch of target element.

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault(); // prevent navigating
  var selector = $(this).data("toggle"); // get corresponding element
  $("p").hide();
  $(selector).show();
});

.expanding-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
  <thead>
    <tr>
      <th class="confluenceTh"></th>
      <th class="confluenceTh">a1</th>
      <th class="confluenceTh">a2</th>
      <th class="confluenceTh">a3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>

score 1 · Answer 2 · answered Apr 17 '15 at 11:48

1

wrap the code in a document ready statement

$( document ).ready(function() {
  // Handler for .ready() called.
});

answered Apr 17 '15 at 11:48

madalinivascu

32,064
4
39
55

score 0 · Answer 3 · answered Apr 17 '15 at 11:43

The thing here is your jquery selector, you are targeting your links wrongly, try this instead:

    <script>
    $("a[data-toggle=*]").on("click", function(e) {
       e.preventDefault();  // prevent navigating
       var selector = $(this).data("toggle");  // get corresponding element
       $("p").hide();
       $(selector).show();
   });   
   </script>

That way you will target all A tags, with a data-toggle with any value inside it.

score 0 · Answer 4 · answered Apr 17 '15 at 11:46

An alternative way:

WORKING DEMO

<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
    <tr>
        <th class="confluenceTh"></th>
        <th class="confluenceTh">a1</th>
        <th class="confluenceTh">a2</th>
        <th class="confluenceTh">a3</th>
    </tr>
</thead>
<tbody>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>

JS:

$(document).on("click","a[data-toggle]", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("p").hide();
  $(selector).show();
});

Toggling specific paragraphs using jquery doesn't work

4 Answers4