This one is like sorting, if I select 'A' brands letter i want show the list starting 'A', the same for A to Z. And if i select the one need to hide all others using jquery.

When we click data-js-brands-letter="a" need to show data-js-brands-section="a" , I have tried some methods using the below link How to show elements using jQuery based on data attributes but this is not working.

<div class="brands js-brands">
  <div class="brands__alphabet">
    <ul>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="all">All
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="a">A
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="b">B
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="z">Z
                </a>
      </li>
    </ul>
  </div>
  <div class="brands__content" data-js-brands-content="">
    <div class="brands__section " data-js-brands-section="a">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="a">A</a>
      </div>
      <div class="">
        <ul>
          <li>Aaa</li>
          <li>Aaaaa</li>
          <ul>
      </div>
    </div>
    <div class="brands__section " data-js-brands-section="b">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="b">B</a>
      </div>
      <div class="">
        <ul>
          <li>Baa</li>
          <li>Baaaa</li>
          <ul>
      </div>
    </div>

    <div class="brands__section " data-js-brands-section="z">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="z">Z</a>
      </div>
      <div class="">
        <ul>
          <li>Zaa</li>
          <li>Zaaaa</li>
          <ul>
      </div>
    </div>

  </div>

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try this

• if all is clicked, show all and leave
• otherwise show the section matching the clicked letter

You can have

$(".brands__content [data-js-brands-section]").show();

if you hide by default using CSS, otherwise just don't hide

const $allSections = $(".brands__content [data-js-brands-section]");
$(".brands__alphabet [data-js-brands-letter]").on("click", function() {
  const what = $(this).data("js-brands-letter")
  if (what === "all") {
    $allSections.show()
    return
  }
  $allSections.hide();
  $(".brands__content [data-js-brands-section="   what   "]").show()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="brands js-brands">
  <div class="brands__alphabet">
    <ul>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="all">All</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="a">A</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="b">B</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="z">Z</a>
      </li>
    </ul>
  </div>
  <div class="brands__content" data-js-brands-content="">
    <div class="brands__section " data-js-brands-section="a">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="a">A</a>
      </div>
      <div class="">
        <ul>
          <li>Aaa</li>
          <li>Aaaaa</li>
        </ul>
      </div>
    </div>
    <div class="brands__section " data-js-brands-section="b">
      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="b">B</a>
      </div>
      <div class="">
        <ul>
          <li>Baa</li>
          <li>Baaaa</li>
        </ul>
      </div>
    </div>

    <div class="brands__section " data-js-brands-section="z">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="z">Z</a>
      </div>
      <div class="">
        <ul>
          <li>Zaa</li>
          <li>Zaaaa</li>
        </ul>
      </div>
    </div>

  </div>

</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>