Accordion type display for multiple dynamically generated div

Question

Screenshot of the webpage
I'm trying to create multiple accordion display divs dynamically using php.
But the problem is that when i click on an tag in the second div, an empty row under the first div is still shown. Is there any way to hide the rows of the divs that are not in focus?
An example
Jquery code for the accordion -

$(document).ready(function() {

var tab = $('.faq-row-handle > a'),
    tabContent = $('.faq-row-content'),
    tabParent = $('.faq-row');

    if(tab.length){

        tab.off('click').on('click', function(){

            var ele = $(this),
                currContent = $('#'+ele.attr('rel'));

                if(!ele.hasClass('open')){

                    tabParent.stop(true, true).animate({
                        height:'0px'

                    },function() {
                        tabContent.removeClass('open');
                        currContent.addClass('open');
                        tab.removeClass('open');
                        ele.addClass('open');

                        tabParent.stop(true, true).animate({
                            height:currContent.height()+'px'
                        }); 

                    });

                }  

        });

        $('.faq-row-handle > a:eq(0)').click();
 }});

Answer 1

When you initialise tabParent , you assigned all rows, thus when you animate the height, you set the height of all parents.

See below:

 $(document).ready(function() { var tab = $('.faq-row-handle > a'), tabContent = $('.faq-row-content'); if(tab.length){ tab.off('click').on('click', function(){ var ele = $(this), currContent = $('#'+ele.attr('rel')); //get this parent only var tabParent = $(currContent).parent(); if(!ele.hasClass('open')){ $('.faq-row').stop(true, true).animate({ height:'0px' },function() { tabContent.removeClass('open'); currContent.addClass('open'); tab.removeClass('open'); ele.addClass('open'); tabParent.stop(true, true).animate({ height:currContent.height()+'px' }); }); } }); $('.faq-row-handle > a:eq(0)').click(); } }); 

 .clear{ clear:both; display:block; height:0; width:auto; } .faq-row-container{ font-family:Arial, Helvetica, sans-serif; } .faq-row { background-color: #fff; border: #ccc 1px solid; margin-bottom: 12px; position:relative; overflow:hidden; } .faq-row-handle { border:#ccc 1px solid; border-bottom:none; } .faq-row-handle > a { cursor: pointer; display: block; color: #191919; font-weight: normal; font-size: 13px; padding: 7px 30px 7px 10px; line-height: 20px; text-decoration: none; outline: 0; float:left; border-right: #ccc 1px solid; } .faq-row-handle a.open{ color:green; } .faq-row-content { color: #666; font-weight: normal; line-height: 150%; font-size: 13px; display: none; position:absolute; top:0; left:0; } .faq-row-content.open{ display:block; } .faq-row-content p { padding: 0 14px 10px 14px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="faq-row-container"> <div class="faq-row-handle"> <a href="javascript:;" rel="item1">1. item</a> <a href="javascript:;" rel="item2">2. item</a> <a href="javascript:;" rel="item3">3. item</a> <a href="javascript:;" rel="item4">4. item</a> <a href="javascript:;" rel="item5">5. item</a> <a href="javascript:;" rel="item6">6. item</a> <div class="clear"></div> </div> <div class="faq-row"> <div id="item1" class="faq-row-content"> <p>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="item2" class="faq-row-content"> <p>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="item3" class="faq-row-content"> <p>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic ions of Lorem Ipsum.</p> </div> <div id="item4" class="faq-row-content"> <p>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p> </div> <div id="item5" class="faq-row-content"> <p>5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p> </div> <div id="item6" class="faq-row-content"> <p>6 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="clear"></div> </div> </div> <br> <div class="faq-row-container"> <div class="faq-row-handle"> <a href="javascript:;" rel="item7">7. item</a> <a href="javascript:;" rel="item8">8. item</a> <a href="javascript:;" rel="item9">9. item</a> <a href="javascript:;" rel="item10">10. item</a> <a href="javascript:;" rel="item11">11. item</a> <a href="javascript:;" rel="item12">12. item</a> <div class="clear"></div> </div> <div class="faq-row"> <div id="item7" class="faq-row-content"> <p>7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="item8" class="faq-row-content"> <p>8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="item9" class="faq-row-content"> <p>9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic ions of Lorem Ipsum.</p> </div> <div id="item10" class="faq-row-content"> <p>11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</p> </div> <div id="item11" class="faq-row-content"> <p>11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p> </div> <div id="item12" class="faq-row-content"> <p>12 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="clear"></div> </div> </div> 

Answer 2

Thanks to Vincent Chinner for helping me out. I'm just posting a change I made to his code to make the animation for the first division smooth. Hope this helps a fellow coder.

$(document).ready(function() {

  var tab = $('.faq-row-handle > a'),
    tabContent = $('.faq-row-content');


  if (tab.length) {

    tab.off('click').on('click', function() {

      var ele = $(this),
        currContent = $('#' + ele.attr('rel'));

      //get this parent only
      var tabParent = $(currContent).parent();

      if (!ele.hasClass('open')) {
        //close all the faq-row divs except the parent
        $('.faq-row').not(tabParent).stop(true, true).animate({
          height: '0px'
        });
        $(tabParent).stop(true, true).animate({
          height: '0px'

        }, function() {
          tabContent.removeClass('open');
          currContent.addClass('open');
          tab.removeClass('open');
          ele.addClass('open');

          tabParent.stop(true, true).animate({
            height: currContent.height() + 'px'
          });

        });

      }

    });

    $('.faq-row-handle > a:eq(0)').click();
  }

});