How can I sort elements alphabetically by text content and bring next div if existing?-CodePudding

I have a menu I want to sort alphabetically. I found this: Sort DIVs alphabetically without destroying and recreating them?

I applied the jQuery script to "sort". Works great. The only logical problem is that the hidden divs (class: hidden) don't follow, they show/hides by click on "btn_expand" and toggle next div.

I have tried some different ways to develop the script but I don't find any good solution to it. Ends up with a bunch of code and messy results. It should be solved as if next div hasClass "hidden" then "bring it with" and append after the "btn_expand" but I fail with that. Can somebody with more skills maybe help out, it would make my day. :)

Thanks!

$('.sort').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('body');

$(".btn_expand").on('click', function() {
  $(this).next("div").toggle();
});

.btn_expand {
  background: red;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Without sorting</p>

<div >CCC</div>
<div >Hidden content shown by press CCC</div>
<div >EEE</div>
<div >AAA</div>
<div >DDD</div>
<div >BBB</div>
<div >Hidden content shown by press BBB</div>


<br><br>
<p>With sorting</p>

<div >CCC</div>
<div >Hidden content shown by press CCC</div>
<div >EEE</div>
<div >AAA</div>
<div >DDD</div>
<div >BBB</div>
<div >Hidden content shown by press BBB</div>

CodePudding user response：

You could sort, then for each matched element, check if next sibling has class .hidden, if so, add it to the selector, and then append to body:

$('.sort').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).each((index, el) => {
    const hidden = $(el).next();

    if (hidden.hasClass('hidden')) {
        $(el).add(hidden).appendTo('body');
    } else {
        $(el).appendTo('body');
    }

});

$(".btn_expand").on('click', function () {
  $(this).next("div").toggle();
});

.btn_expand{background:red;}  
.hidden{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >CCC</div>
<div >Hidden content shown by press CCC</div>
<div >EEE</div>
<div >AAA</div>
<div >DDD</div>
<div >BBB</div>
<div >Hidden content shown by press BBB</div>

CodePudding user response：

Or, in an even shorter form, you can do this:

$('.sort')
  .sort((a, b)=>a.textContent.localeCompare(b.textContent))
  .each((i,el)=>$(el).add($(el).next(".hidden")).appendTo('body'));

$(".btn_expand").on('click',function() {$(this).next("div").toggle();});

.btn_expand{background:red;}  
.hidden{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >CCC</div>
<div >Hidden content shown by press CCC</div>
<div >EEE</div>
<div >AAA</div>
<div >DDD</div>
<div >BBB</div>
<div >Hidden content shown by press BBB</div>