CODEWITHSUNDEEP
javascriptjqueryhtmlcssaccordion
rakesh
rakesh

Reputation: 165

Accordion issue in Table - jquery

i am binding the data dynamically.

but Accordion is not working properly.

JSFiddle link

http://jsfiddle.net/aff4vL5g/360/

please note: I cant change the HTML structure

Current table enter image description here

Out put i needed

first accordion on click should dispaly child elements enter image description here

Second accordion on click should dispaly child elements enter image description here

where i am doing wrong??

HTML

    <table>
    /* first parent*/ 
             <tr>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                 </a>
              </td>
              <td><a href="#">Profit</a></td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child1*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#" >
                    <div id="accordion"></div>
                    Business - 1
                 </a>
              </td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child2*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                    Business - 2
                 </a>
              </td>
              <td>38%</td>
              <td>28%</td>
           </tr>
/* second parent*/ 
             <tr>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                 </a>
              </td>
              <td><a href="#">Loss</a></td>
              <td>15%</td>
              <td>12%</td>

           </tr>
    /* child1*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#" >
                    <div id="accordion"></div>
                    Business - 1
                 </a>
              </td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child2*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                    Business - 2
                 </a>
              </td>
              <td>38%</td>
              <td>28%</td>
           </tr>
        </table>

Jquery

$(function () {
    //  Accordion Panels
    $(".parentTR").hide();
    $("a .accordion ").click(function () {
        $(this).next(".parentTR").slideToggle("slow").siblings(".parentTR:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings(".accordion").removeClass("active");
    });
});

Any Help is Appreciated

Thanks

Upvotes: 0

Views: 929

Answers (3)

111
111

Reputation: 1779

I try with this solution JSFiddle

HTML : 

     <table>
     <tr childTRClass="A1">
      <td>
         <a href="#">
            <div class="accordion"></div>
         </a>
      </td>
      <td><a href="#">Profit</a></td>
      <td>35%</td>
      <td>22%</td>
   </tr>

   <tr class="childTR A1">
      <td></td>
      <td>
         <a href="#" >
            <div class="accordion"></div>
            Business - 1
         </a>
      </td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   <tr class="childTR A1">
      <td></td>
      <td>
         <a href="#">
            <div class="accordion"></div>
            Business - 2
         </a>
      </td>
      <td>38%</td>
      <td>28%</td>
   </tr>

     <tr childTRClass="A2">
      <td>
         <a href="#">
            <div class="accordion"></div>
         </a>
      </td>
      <td><a href="#">Loss</a></td>
      <td>15%</td>
      <td>12%</td>
   </tr>

   <tr class="childTR A2">
      <td></td>
      <td>
         <a href="#" >
            <div class="accordion"></div>
            Business - 1
         </a>
      </td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   <tr class="childTR A2">
      <td></td>
      <td>
         <a href="#">
            <div class="accordion"></div>
            Business - 2
         </a>
      </td>
      <td>38%</td>
      <td>28%</td>
   </tr>

</table>

JQuery:

  $(document).ready(function() {
  $(".childTR").hide();
    $('a .accordion').click(function() {
        var openTRClass = $(this).closest('tr').attr('childTRClass');
               $(".childTR:visible").slideUp("slow");
       $("."+ openTRClass).slideToggle("slow")
               if($('.active').length > 0)
        {
            $('.active').removeClass("active");
        }

        $(this).toggleClass("active");        
    });
});

Upvotes: 1

Samarth
Samarth

Reputation: 61

First need to go to main parent.

$(function () {
    $(".parentTR").hide();
    
    $("a .accordion ").click(function () {
        $(".parentTR").hide();
        $(this).closest('.main').nextUntil(".main").slideToggle("slow");
       
        $(this).toggleClass("active");
        $(this).siblings(".accordion").removeClass("active");
    });
});

Here's the Fiddle.

Upvotes: 1

anpsmn
anpsmn

Reputation: 7257

You need to go to the parent tr and then access the sibling with .next()

$(this).closest('tr')
     .next(".parentTR").slideToggle("slow")
     .siblings(".parentTR:visible").slideUp("slow");

Fiddle

Upvotes: 1

Related Questions